本次创建是基于webpack4
$ npm install --save-dev
新建webpack配置文件
在根目录创建build文件夹，添加一个js文件，命名为webpack.base.conf.js
// webpack.base.conf.js 文件 const path = require('path'); const DIST_PATH = path.resolve(__dirname, '../dist'); module.exports = { entry: { app: './app/index.js' }, output: { filename: "js/bundle.js", path: DIST_PATH } };
使用merge的方式来组织webpack基础配置和不同环境的配置
先安装webpack-merge：
$ npm install --save-dev webpack-merge
在build文件夹中再添加一个js文件，命名为 webpack.prod.conf.js
// webpack.prod.conf.js 文件 const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf'); module.exports = merge(baseWebpackConfig, { mode: 'production' });
在根目录下创建app目录，然后创建index.js文件
var element =document.getElementById('root'); element.innerHTML = 'hello, world!';
在根目录创建一个public文件夹，然后新建一个index.html文件
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>从零开始搭建react工程</title> </head> <body> <div></div> <script src="https://www.jb51.net/dist/js/bundle.js"></script> </body> </html>
当前项目目录树
|- /app |- index.js |- /node_modules |- /public |- index.html |- /build |- webpack.base.conf.js |- webpack.prod.conf.js |- package.json |- package-lock.json
安装webpack-cli
webpack 4.0 版本之后的webpack，已经将webpack命令工具迁移到webpack-cli模块了,需要安装 webpack-cli
$ npm install --save-dev webpack-cli
package.json文件 scripts属性配置一个build命令
其值为：webpack --config build/webpack.prod.conf.js，以下是scripts的相关代码
// package.json "scripts": { "build": "webpack --config build/webpack.prod.conf.js", "test": "echo \"Error: no test specified\" && exit 1" },
安装React
$ npm install --save react react-dom
修改app目录下的index.js的代码
import React from "react"; import ReactDom from "react-dom"; ReactDom.render( <h1>hello, world!</h1>, document.getElementById("root") );
注意 import 属于ES6规范，因此需要转译ES2015+的语法，安装并配置 babel 以及相关依赖
$ npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react
根目录创建.babelrc文件，配置presets.
{ "presets": [ [ "env", { "targets": { "browsers": [ "> 1%", "last 5 versions", "ie >= 8" ] } } ], "react" ] }
修改webpack.base.conf.js文件
// webpack.base.conf.js const path = require('path'); const APP_PATH = path.resolve(__dirname, '../app'); const DIST_PATH = path.resolve(__dirname, '../dist'); module.exports = { entry: { app: './app/index.js' }, output: { filename: 'js/bundle.js', path: DIST_PATH }, module: { rules: [ { test: /\.js?$/, use: "babel-loader", include: APP_PATH } ] } };
运行 npm run build
添加插件
public下的index.html本该自动添加到dist目录，并且引用资源自动加载到该文件，通过html-webpack-plugin实现这一步
$ npm install html-webpack-plugin --save-dev
webpack.prod.conf.js中配置plugins属性
const merge = require('webpack-merge'); const baseWebpackConfig = require('./webpack.base.conf.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = merge(baseWebpackConfig, { mode: 'production', plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html', inject: 'body', minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, }) ] });
删除 index.html 中手动引入的 script 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>从零开始搭建react工程</title> </head> <body> <div></div> </body> </html>
重新编译查看 npm run build 浏览器打开查看目录 dist 下的 index.html
以上步骤都成功的前提下继续走下一步
生成的文件名添加Hash值，目的是解决缓存问题
修改webpack.prod.conf.js，mode: 'production', 增加以下代码
// webpack.prod.conf.js output: { filename: "js/[name].[chunkhash:16].js", },
生成前需要清理之前项目生成的文件，因为由于文件名的改变如果不删除会一直增加
安装插件 clean-webpack-plugin
$ npm install --save-dev clean-webpack-plugin
修改 webpack.prod.conf.js