1. 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org【使用淘宝镜像】
2. 初始化package.json文件
cnpm init -y
3. 安装webpack
cnpm install -d webpack webpack-cli
5. 安装webpack-dev-server（动态显示界面刷新）
cnpm install -d webpack-dev-server
6. 安装html-webpack-plugin【安装插件，用于把index.html加载到内存中去显示】
cnpm install -d html-webapck-plugin
7. 安装babel[关键点]
cnpm install babel-loader -d[如果安装失败的话，就使用npm install babel-loader, 默认安装的就是一个babel的最新版了]
cnpm install @babel/core @babel/preset-env -d
8. 安装react相关
cnpm install @babel/preset-react -d
9. 配置文件webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlgin = new HtmlWebpackPlugin({
// 配置成功之后会自动在内存中生成一个index.html文件，同时也是可以直接在页面的尾部追加一个main.js文件的
template : path.join(__dirname, './src/index.html'),
filename:'index.html'
})
module.exports = {
// prduction 模式下会自动压缩，development模式下是不会自动进行压缩的。【这是一个必须选项】
mode : 'production',
// webpack4.x 约定了默认的打包入口文件是src下面的index.js文件
// entry : './src/main.js' // 指定打包的入口文件，也可以不指定设置一个index.js文件
plugins : [
htmlPlgin
],
module : {
// 所有第三方模块的配置规则（Webpack默认只能打包js文件，对于其他vue，png，react是无法直接使用的）
// 只要代码中有webpack不能识别的规则，就需要配置loader
rules : [
{test : /\.(js|jsx)$/, use : 'babel-loader', exclude : /node_modules/} // 这里的exclude是不能少的
]
}
}
10. 配置.babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": []
}
11. 为了实现打包后的代码的复用性，使用一个babel-transform-runtime这个插件
babel-runtime 是供编译模块复用工具函数。是锦上添花（可以实现代码复用）
babel-polyfil是雪中送炭，是转译没有的api.（类似于String.protype.indludes = func(){}, 手动增加了一个原型方法）
cnpm install -d @babel/plugin-transform-runtime