一、版本号
node v10.8.0
webpack v4.29.6
二、搭建步骤
1、npm初始化项目
新建项目react-test，并进行初始化
$ mkdir react-test
$ cd react-test
$ npm init
之后一路回车，即可完成初始化。初始化后react-test目录下会有一个package.json文件。
2、安装所需要的包
webpack和webpack-dev-server是打包工具和辅助开发的服务器，该服务器能热加载代码，自动刷新页面，代理服务器解决前端开发时跨域问题
$ npm install webpack webpack-dev-server
这几个是babel编译器的npm包。
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
下面是部分常用的webpack需要处理样式文件打包的处理器
$ npm install css-loader postcss-loader style-loader url-loader sass-loader node-sass
安装react的基础包
$ npm install react react-dom
其他必要包
$ npm install webpack-cli
$ npm install path
$ npm install --save @types/webpack
3、搭建项目结构
项目结构如下图所示
1554814968160.jpg
在react-test目录下创建文件index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Test</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
新建文件夹/src，在react-test/src/目录下创建文件main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/App.jsx';
ReactDOM.render(
<App />, document.getElementById('app')
)
在react-test/src/目录下创建文件夹/components，在react/src/components/目录下创建文件App.jsx
import React from 'react';
import '../css/App.scss';
class App extends React.Component {
constructor (...args) {
super(...args);
}
render() {
return <div className={styles.fontC}>Hello World !</div>;
}
}
export default App;
4、配置webpack.config.js文件
在react-test项目目录下新建文件webpack.config.js
const path = require('path');
module.exports = {
entry: __dirname+'/src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/node_module/],
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]__[hash:base64:5]',
},
},
{
loader: 'sass-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]__[hash:base64:5]',
},
},
],
},
{
test: /\.(ico|png|jpg|jpeg|mp4|gif|mov)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
},
}],
},
{
test: /\.js|jsx$/,
exclude: [/node_module/, /third-party/, /\.json$/],
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'stage-0'],
},
}],
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
devServer: {
port: 3000,
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true,
https: false,
hot: true,
inline: true,
compress: false,
open: true,
},
}
5、配置package.json文件
修改package.json里的scripts对应的内容
"scripts": {
"start": "webpack-dev-server --inline --colors --hot",
"build": "webpack --config webpack.config.js"
},
6、配置html-webpack-plugin插件
安装html-webpack-plugin包
$ npm install html-webpack-plugin
在webpack.config.js中添加下面内容
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
favicon: './favicon.ico',
filename: './index.html',
template: './index.html',
inject: true,
hash: false,
}),
],
7、运行、编译项目
运行项目
$ npm run start
编译项目
$ npm run build
输入命令后，可生成一文件夹/dist，文件夹下的内容即编译结果。
三 、重要配置文件
下附两个配置文件的全部内容
1、webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname+'/src/main.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/node_module/],
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]__[hash:base64:5]',
},
},
{
loader: 'sass-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]__[hash:base64:5]',
},
},
],
},
{
test: /\.(ico|png|jpg|jpeg|mp4|gif|mov)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
},
}],
},
{
test: /\.js|jsx$/,
exclude: [/node_module/, /third-party/, /\.json$/],
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'stage-0'],
},
}],
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
devServer: {
port: 3000,
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true,
https: false,
hot: true,
inline: true,
compress: false,
open: true,
},
plugins: [
new HtmlWebpackPlugin({
favicon: './favicon.ico',
filename: './index.html',
template: './index.html',
inject: true,
hash: false,
}),
],
}
2、package.json
注：各依赖包的版本不要轻易调整，因为可能因为彼此不支持而导致项目无法正常运行。
{
"name": "react-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline --colors --hot",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"@types/webpack": "^4.4.27",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.0"
}
}
Github链接：https://github.com/JayneJing/React-Test-By-Webpack/tree/new-project
该链接下的项目可在新建react项目时复用。
网友评论