webpack4 公共模块打包

最新推荐文章于 2022-11-02 10:22:35 发布

原创最新推荐文章于 2022-11-02 10:22:35 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack4

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Webpack 4中如何处理公共模块的打包问题，由于CommonsChunkPlugin已被移除，现在需要使用optimization.splitChunks来实现。在设置过程中需要注意，新的chunk大小需超过30kb才能生效。通过示例展示了如何配置webpack.config.js，将多个文件中的公共模块打包成单独的commons.js，以实现模块的共享和优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此时webpack版本为：4.29.6

从webpack v4开始，CommonsChunkPlugin就被删除不再适用，取而代之是optimization.splitChunks

但是对于入门的人来说，肯定会没注意一句话：New chunk would be bigger than 30kb (before min+gz)！意思就是公开模块必须大于30kb才可以使用。

目录文件：

文件1：index.js

import '../users.js';
console.log("i love you");

文件2：mode.js

import '../users.js';

公共模块：users.js

//大于30kb的代码就行

两个文件都有公共模块，可以直接把公共模块单独打包成commons.js，这样可以共享

webpack.config.js

const path = require('path');
module.exports={
    entry:{
        'index':'./src/js/index.js',
        'mode':'./src/js/mode.js'
    },
    output:{
        filename:'./[name]-main.js',
        path:path.resolve(__dirname,'dist'),
        publicPath:'dist/'
    },
//公共模块插件：
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    }   
};

package.json我设置了为：