webpack的CommonsChunkPlugin提取node_modules

问题描述

问 题

看到vue-cli的提取common chunk的写法如下

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      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
        )
      }
    })

直接这么写不一样的吗，有什么区别？

new webpack.optimize.CommonsChunkPlugin({
        names: ["vendor"],
        minChunks: 2
    }),

解决方案

区别就在于规定哪些module会被打包进这个CommonChunk里。填个数字，比如说2，意思就是被引用2次及以上的module，而传入个function，就是让你自己来写更具体的判断规则（比如说根据Module的文件路径来判断）。

详情请参考官方文档

这篇关于webpack的CommonsChunkPlugin提取node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！