CommonsChunkPlugin中的minChunks参数疑惑

发布于 2022-09-06 10:41:29 字数 1017 浏览 22 评论 0

webpack配置如下:

{
    entry: {
        main: './src/main.js',
        first: './src/first.js',
        vendor: ['react','jquery']
    },
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: '[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: '[name].js',
            minChunks: function (module, count) {
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
                )
            },
        }),
    ]
}

我的疑惑在于:

  1. 依照上面的例子, minChunks函数的参数module和返回布尔值true或false各代表什么意思?
  2. 我打印出module.resource,里面包括了入口文件main和first及其引用到的自定义和第三方模块,module.source有什么用呢?

问题有点多,但个人尝试了很多次,都没办法解开以上疑惑,还望赐教。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

陌路终见情 2022-09-13 10:41:29

这么理解,CommonsChunkPlugin 是为了提取出公共的模块,那么 minChunks 就是说提取出的公共模块必须(至少)在哪些 chunks 中。

在 webpack 中 chunk 会组成 bundle(bundle 就是最后输出的文件)。一般两者是一一对应的关系,但也不一定,一些插件可以改变,比如这个 CommonsChunkPlugin

模块就是 import、require 的东西,一个 chunk 里一般会有多个模块。

可以给 minChunks 传数字和数组,这个好理解。而传函数的时候 webpack 会用它来检验每个模块。

module.resource 是指正在被处理的文件。

                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
                )

就是“有正在处理文件” + “这个文件是 .js 后缀” + “这个文件是在 node_modules 中”

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文