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