The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）-优快云博客

本文详细介绍了如何使用Webpack3及Webpack4进行多页面应用的公共代码打包，包括配置CommonsChunkPlugin和splitChunks缓存组策略，实现业务逻辑和第三方插件代码的有效分离。

学习之路基于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
                }
            }
        }
    }
};

转载于:https://www.cnblogs.com/weihuan/p/9635768.html