The way of Webpack learning (II.) -- Extract common code（多頁面提取公共代碼）

學習之路基於webpack3.10.0，webpack4.0以後更新。

多頁面提取公共代碼！！！

一：文件關係

pageA --> subA、subB --> moduleA

pageB --> subA、subB --> moduleA

那麼pageA、pageB 的公共代碼就是subA、subB 、moduleA。

二：webpack.config.js文件配置

var webpack = require('webpack')
var path = require('path');

module.exports = {
    entry:{
        "pageA":'./src/pageA.js',
        "pageB":'./src/pageB.js',
        'vendor':['lodash']//第三方插件
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'[name].bundle.js',
        chunkFilename:'[name].chunk.js'
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({//打包業務邏輯上面的公共代碼
            name:'common',
            minChunks:2,
            chunks:['pageA','pageB']
        }),
        new webpack.optimize.CommonsChunkPlugin({//打包第三方插件lodash的代碼
            name:'vendor',
            minChunks:Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({//打包webpack代碼
            name:'manifest',
            minChunks:Infinity
        })
    ]
}

　　打包公共代碼只適合多頁面應用。

三：webpack4中的打包公共代碼

webpack4已經移除了commonchunkPlugin，直接在配置裏面寫便可。

const webpack = require("webpack");
const path = require("path");

module.exports = {
    mode:'development',
    // 多頁面應用
    entry: {
        pageA: "./src/pageA.js",
        pageB: "./src/pageB.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                // 注意: priority屬性
                // 其次: 打包業務中公共代碼
                common: {
                    name: "common",
                    chunks: "all",
                    minSize: 1,
                    priority: 0//優先級
                },
                // 首先: 打包node_modules中的文件
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 10
                }
            }
        }
    }
};