相关疑难解决方法(0)

有人可以解释Webpack的CommonsChunkPlugin

我得到了通用的要点,即CommonsChunkPlugin查看所有入口点,检查它们之间是否存在共同的包/依赖关系,并将它们分成自己的包.

所以,我们假设我有以下配置:

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...
Run Code Online (Sandbox Code Playgroud)

如果我不使用捆绑 CommonsChunkPlugin

我最终会得到3个新的捆绑文件:

  • entry1.bundle.js它包含来自entry1.js和的完整代码,jquery并包含自己的运行时
  • entry2.bundle.js它包含来自entry2.js和的完整代码,jquery并包含自己的运行时
  • vendors.bundle.js它包含来自jquery和的完整代码,some_jquery_plugin并包含自己的运行时

这显然很糟糕,因为我可能会jquery在页面中加载3次,所以我们不希望这样.

如果我捆绑使用 CommonsChunkPlugin

根据我传递给CommonsChunkPlugin任何以下任何参数的参数将发生:

  • 情况1:如果我通过,{ name …

javascript bundle webpack commonschunkplugin webpack-plugin

79
推荐指数
1
解决办法
8928
查看次数