非原创，只是根据代码，重复做一遍，记录自己的知识点。推荐原博地址：https://github.com/vortesnail/blog/issues/4
一、webpack安装
1、 初始化命令
【npm init -y】: 该命令会生成一个package.json文件，是配置文件。这个文件定义了项目需要的模块、项目配置信息（如名称、版本）。
【npm install】: 根据配置文件安装所需要的模块，配置项目需要的运行环境和开发环境。该命令会生成package-lock.json文件。
2、安装webpack
(1)【npm install --save-dev webpack webpack-cli】： 安装webpack-cli。因为使用webpack 4+ 版本，必须要安装webpack-cli。安装完成后，会发现package.json中多了一个属性devDependencies。因为 --save-dev表示的是开发时的依赖， --save 表示的时运行时的依赖。接下来的依赖都要用 --save。
(2)config文件
在根目录下创建一个config文件夹，用来存放配置文件。然后在这个文件夹里面再创建一个名为webpack.common.config.js的文件，用于存放配置文件。
【webpack.common.config.js文件】：该文件用来配置出水口和入水口的文件地址。
const path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, '../dist')
}
}
（3）添加start指令
在package.json文件里，为script属性添加start指令。指令标注的是配置文件的路径。
【指令】：webpack --config ./config/webpack.common.config.js
（4）在控制台进行打包
【npm run start】: 在控制台输入命令，打包后生成dist/js/bundle.js文件。
二、webpack-merge的使用
使用这个工具的原因： 生产环境和测试环境用一套环境就行，为了不写两遍，所以要安装webpack-merge
1、安装
【npm install --save-dev webpack-merge】: 安装webpack-merge，放在测试环境下。
2、config文件夹下建立测试配置文件和生产配置文件
【webpack.prod.config.js】: 生产配置文件，存放生产环境下的配置。
【webpack.dev.config.js】: 开发配置文件，存放运行环境下的配置。
3、webpack.prod.config.js文件进行配置
利用webpack-merge工具，将common与prod进行merge
const merge = require('webpack-merge')
const common = require('./webpack.common.config')
module.exports = merge(common, {
mode: 'production'
})
4、app.js建立连接
在app.js文件中找到锚点，锚点id为root
5、public文件夹
创建public文件夹，在文件夹下创建index.html文件，在文件里创建id='root'的
6、创建build指令，并在控制台运行
三、安装React
1、安装react
【npm install --save react react-dom 】:react是正式环境需要的
2、在src文件夹下面建立index.js文件，用来渲染根组件
3、在index.js文件下面，利用render函数进行根组件的渲染。
【reactDOM.render（组件名，id锚点】：渲染根组件
4、利用jsx语法在app.js文件中创建App组件
5、修改webpack.common.config.js文件的入水口
6、这个时候执行npm run build命令，会提示打包失败，这是因为webpack并识别不来哦jsx语法，所以需要使用loader对文件进行预处理。
四、使用babel7
1、安装插件
babel相关的模块有四个：
2、根目录配置文件
只是安装babel是不起作用的，必须要有相对应的配置文件。该文件的位置一定是在根目录下。
文件名为”.babelrc“;
这个文件的配置项主要有两个，presets和plugins。配置参数的相关文档：
https://www.jianshu.com/p/3881c9ee4497
3、修改webpack.common.config.js，添加rules属性
4、控制台打包
【npm run build】：控制台输入命令，进行打包
报错：
1、npm没有安装成功
ERROR in ./src/index.js
Module not found: Error: Can't resolve 'react' in '/Users/wenxin/Desktop/myCode/webpack-react-scaffold/src'
这条错误的下面有一句：
This is probably not a problem with npm. There is likely additional logging output above.
但实际上，就是npm没有将react和reactDOM安装成功。在package.json文件中，缺少dependencies属性。重新安装后，报错消失。
2、.bablerc文件的配置问题
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-prest-env' from '/Users/wenxin/Desktop/myCode/webpack-react-scaffold'
找不到@babel/preset-preset-env这个模块的原因是.bablerc文件配置有问题，我是targets属性写成了“target”，少了个复数s