使用CommonsChunkPlugin而不总是需要定义webpackJsonp？

Question

我有一个使用大型包的项目(dexie.js并不认为它对这个问题很重要)，我想将它“拆分”到它自己的包中，我可以手动地包含它，因为它只需要在我的几个入门点脚本中使用。

让您知道:我的webpack配置使用多个模块，有多个(6)入口点，所以这是我的webpack.config.js的一个压缩示例。

{
context: path.join(__dirname, 'src'),
entry: {
    'js/contentscript.js' : './js/contentscript.js',
    'js/background.js'    : './js/background.js',
    'js/popup.js'         : './js/popup.js',
    'js/options.js'       : './js/options.js',
},
output: {
    path: path.join(__dirname, 'dist'), 
    filename: "[name]"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "dexie",
        filename: "js/dexie.js",
        minChunks: function (module) {
            // this assumes your vendor imports exist in the node_modules directory
            return module.context && module.context.includes("node_modules/dexie");
        }
    }),
    ... // other non relevant plugins here
]
}

问题是，我没有典型的“供应商”或“公共”需求，就像许多其他项目一样。我只想在少数情况下包括js/dexie.js包。

例如：在options.html中，我有以下内容：

<script src="js/dexie.js"></script>
<script src="js/options.js"></script>

...but --我不希望它被用于popup.html，我想将其保存如下：

<script src="js/popup.js"></script>

而且，由于这也是一个WebExtensions项目，我绝对不希望我的内容脚本需要它！

问题是，当我打开popup.js时，我得到了错误：Uncaught ReferenceError: webpackJsonp is not defined。

有没有办法--不把它分割成更多的webpack模块--这样CommonsChunkPlugin就能很好地发挥它的入口点，只有我想要的才会受到它的影响？

我唯一能想到的解决方案是制作另一个CommonsChunkPlugin，它通常使用“供应商”和“公共”的方式。这就是：

    new webpack.optimize.CommonsChunkPlugin({
        name: "dexie",
        filename: "js/dexie.js",
        minChunks: function (module) {
            // this assumes your vendor imports exist in the node_modules directory
            return module.context && module.context.includes("node_modules/dexie");
        }
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: "manifest",
        filename: "js/manifest.js",
        minChunks: Infinity
    }),

不幸的是，这意味着我需要在我的所有脚本中包含js/manifest.js，因为这是一个WebExtension，这意味着我必须将它注入到每个内容page...IMHO中--这是一个糟糕的解决方案。

关于如何改进这个问题，有什么建议吗？我是不是不正确地使用CommonsChunkPlugin？我应该使用更好的模块吗？(其实我还在跟webpack打交道！)

Answer 1

我无意中发现了@prograhammer：https://stackoverflow.com/a/40416826/125525这个极好的答案。

在其中，他提到了外部性插件，这是我以前从未听说过的，它巧妙地解决了我的问题。这是webpack网站的描述：

例如，从CDN中包含jQuery而不是捆绑它： index.html webpack.config.js 外部：{ jquery：'jQuery‘} 这使任何依赖模块保持不变，即下面所示的代码仍能工作： 导入$从'jquery'；$(‘.’).animate(.)；

Answer 2

首先，使用'js/xxx.js‘作为条目名并不是一个好方法。如果您的options.js需要dexie.js而popup.js不需要它。您可以尝试像下面这样更改文件。

webpack.config.js

entry: {
    'vendor' : ['dexie'],
    'contentscript' : './js/contentscript.js',
    'background'    : './js/background.js',
    'popup'         : './js/popup.js',
    'options'       : './js/options.js',
},
resolve: {
    alias: {
        'dexie':'...'
    }
},
new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity
}),

正如我前面所说的，CommonChunksPlugin将自动帮助您提取公共依赖项，在这种情况下，您不需要编写minChunks函数来指示依赖项。

options.html

<script src="js/vendor.js"></script>
<script src="js/options.js"></script>

popup.html

<script src="js/popup.js"></script>