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
