webpack4 公共模块打包

本文介绍了在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我设置了为:

"pack": "webpack --mode development"

运行:npm run pack

完美!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值