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

【问题标题】：Using CommonsChunkPlugin without always needing to define webpackJsonp?使用 CommonsChunkPlugin 而不总是需要定义 webpackJsonp？
【发布时间】：2018-06-11 18:43:48
【问题描述】：

我有一个使用大包的项目（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>

...但我不希望它用于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，所以这意味着我必须将它注入每个内容页面......恕我直言是一个糟糕的解决方案。

关于如何改进这一点的任何想法？我是否错误地使用了CommonsChunkPlugin？我应该使用更好的模块吗？（实际上，我还在学习 webpack！）

【问题讨论】：

标签： javascript webpack webpack-2 dexie

【解决方案1】：

首先，使用 '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>

【讨论】：

我想对一些文件使用 CommonChunksPlugin，而不影响其他文件。
CommonChunksPlugin 会自动帮你提取常用依赖，你只需要声明一个新的 webpack.optimize.CommonsChunkPlugin。
你需要再仔细阅读我的问题。我非常清楚地概述了问题。

【解决方案2】：

我偶然发现了@prograhammer 的这个出色的答案：https://stackoverflow.com/a/40416826/125525

他在其中提到了Externals 插件，这是我以前没有听说过的，它巧妙地解决了我的问题。这是来自 webpack 网站的描述：

例如，从 CDN 中包含 jQuery 而不是捆绑它：

index.html
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
webpack.config.js
externals: {
  jquery: 'jQuery'
}
这使所有依赖模块保持不变，即如下所示的代码仍然可以工作：
import $ from 'jquery';

$('.my-element').animate(...);

【讨论】：