webpack一直再更新，webpack作為前端構建工具，有它 的優勢性。每次更新webpack為了讓這個工具使用起來更加方便，效能優化。在webpack3.x時，在打包壓縮時，必須得使用額外的外掛，配置雖然不是那麼麻煩有官網，但這是一個耗時耗力的事情。webpack4.x就解決了額外外掛問題，只需要安裝一個webpack-cli，無需過多配置壓縮外掛，在webpack-cli中整合很多webpack中的額外外掛，故配置起來，那就會省點力氣。不過第一次配置4.x還是得需要閱讀官方文件，從整體講，配置時的程式碼減少了。

        接下來我們一步一步的配置4.x的程式碼；

       我們將生產環境外掛，本地環境外掛，公共外掛分割開來，這時我們得需要一個外掛 webpack-merge ——是將本地開發程式碼和生產環境程式碼分隔開，這也是提升效能的一種方式。

先看webpck.common.js檔案中的各部分的外掛；

        像引入核心模組path、wnpack這些基礎模組就不再贅述，不懂就去看看node官網和webpack官網；在entry入口檔案採用了多入口方式，將開發程式碼和第三方引入的外掛分割開，分批打包壓縮，對程式碼構建的一次優化處理，接下來請看本分程式碼：

 entry: {
        app: ['./app/index.jsx'],
        jquery: ['jquery'],
        antd: ['antd-mobile'],
        common: ['babel-polyfill', 'whatwg-fetch']
    } 
 

 出口檔案配置：

 output: { //出口檔案
        filename: 'js/[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: 'js/[name].js'
    }

將js檔案檔案打包到指定資料夾[dist]中;

resolve模組:如何尋找模組對應的檔案;

webpack內建JavaScript模組化語法解析功能，預設會採用模組化標準里約定好的規則去尋找，但你可以根據自己的需要修改預設的規則。

resolve.extensions:根據查詢的檔案自動補全對應的字尾名，以確保該檔案存在。

resolve.alias:自動補全檔案路徑；

resolve: {
        extensions: ['.js', '.jsx', '.json'],
        alias: {
            Component: path.resolve(__dirname, 'app/component/'), //代替模組路徑
            Style: path.resolve(__dirname, 'app/style/'),
            Router: path.resolve(__dirname, 'app/router/'),
            Src: path.resolve(__dirname, 'app/src/'),
            Image: path.resolve(__dirname, 'app/image/')
        }
    }

module模組，module.rules檔案匹配規則的配置。

jsx程式碼，圖片，字型標等的識別解析。

 
        rules: [{
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader',
                },
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|gif)$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        limit: 2048,
                        name: path.posix.join('img/[name].[hash:8].[ext]')
                    }
                }
            },
            {
                test: /\. (woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]

在上面沒有看到css檔案配置，是因為我將其進行分開處理，在生產環境對css與js程式碼進行分割處理，本地開發，沒有進行這樣的處理。

webpack.prod.js生產環境的程式碼分割外掛：optimization和ExtractTextPlugin；這裡配置的是scss前處理器，less也是可以配置，請自行解決。

如何配置，請閱讀程式碼：

 module: {
         rules: [{
             test: /\.(css|scss)$/,
             use: ExtractTextPlugin.extract({
                 fallback: 'style-loader',
                 use: [{
                         loader: 'css-loader',
                         options: {
                             url: true, //flase表示無法解析圖片路徑，
                             minimize: true,
                             sourceMap: true,

                         }
                     },
                     {
                         loader: 'sass-loader',
                         options: {
                             sourceMap: true
                         }
                     }
                 ]
             })
         }]
     },
     optimization: { //程式碼分割外掛
         minimize: true,
         splitChunks: {
             chunks: 'async', //all對所有檔案處理，async非同步匯入檔案處理，initial只對入口檔案處理。
             minSize: 30000,
             minChunks: 1,
             maxAsyncRequests: 5,
             maxInitialRequests: 3,
             automaticNameDelimiter: '~',
             // flagIncludedChunks: true,
             name: true,
             cacheGroups: {
                 vendors: {
                     test: /[\\/]node_modules[\\/]/,
                     priority: -10
                 },
                 default: {
                     minChunks: 2,
                     priority: -20,
                     reuseExistingChunk: true
                 }
             }

         }
     },
 plugins: [
         new webpack.HashedModuleIdsPlugin(),
         new ExtractTextPlugin({
             filename: (getPath) => {
                 return getPath(path.posix.join('[name].css')).replace('js', 'css');
             },
             allChunks: true
         })

     ]

當然在webpack.config.js中還存在像清除外掛CleanWebpackPlugin、html模板外掛HtmlWebpackPlugin、new webpack.ProvidePlugin引入全域性模組外掛、 new webpack.DefinePlugin設定全域性變數外掛，此處就不做過多的敘述。

接下來就是webpack.dev.js;這個當然要講到本地服務，devServe，本地代理解決跨域問題，再加上熱更新。

proxy本地代理解決跨域,HotModuleReplacementPlugin熱跟新外掛等

devServer: {
        contentBase: './dist',
        hot: true,
        port: 3000,
        inline: true,
        host: 'localhost',
        //host:'http://screen.kinlink.cn/',
        historyApiFallback: true,
        noInfo: false,
        proxy: { //通過代理解決本地跨域
            '/api': {
                target: '/api/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/' //這裡理解成用‘/api’代替target裡面的地址，元件中我們調介面時直接用/api代替
                        // 比如我要呼叫'http://0.0:300/user/add'，直接寫‘/api/user/add’即可 代理後位址列顯示/
                }
            }
        }
    },



  new webpack.HotModuleReplacementPlugin()

上面講訴的是webpack配置，如何react中進行使用，接下來得配置一下.babelrc檔案；關鍵就是presets屬性的設定，webpack3.x時使用es2015沒有任何問題，但是webpack4.x就不行。故，看程式碼：

{
    "presets":["es2017","react"],
 	"plugins": [
    	["import", { libraryName: "antd-mobile", style: "css" }]
  	]
}

plugins:引入配置的antd元件的樣式。