如何在 HtmlWebpackPlugin 中与多个 HTML 文件一起使用 Webpack 中的多个条目？

Question

我们想要来自 Webpack 的两个输出——我们的整个应用程序及其所有依赖项，以及一个只有一个依赖项（主应用程序不共享）的不同页面。

这样做的方法似乎是利用entryWebpack 配置的属性。然而，这还不够，因为我们还使用HtmlWebpackPlugin输出我们的 HTML 文件，并build.js添加了动态编译的Webpack（以及编译的 LESS 等）。根据 HtmlWebpackPlugin 文档：

如果您有多个 Webpack 入口点，它们都将包含在生成的 HTML 中的脚本标签中。

这对我们不起作用，所以我需要利用他们的filterChunks选择。这个GitHub 问题响应最简洁地说明了这一点：

module.exports = {
  entry: {
    'page1': './apps/page1/scripts/main.js',
    'page2': './apps/page2/src/main.js'
  },
  output: {
    path: __dirname,
    filename: "apps/[name]/build/bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page1'],
      filename: 'apps/page1/build/index.html'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page2'],
      filename: 'apps/page2/build/index.html'
    })
  ]
};

（在 HtmlWebpackPlugin 文档中，这是在“过滤块”部分下）

所以，我像这样修改了我们的代码：

module.exports = {
    entry: {
        app: './public/js/ide.js',
        resetPassword: './public/js/reset_password.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: '/'
    },
    ...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/html/ide.html',
            inject: true,
            chunks: ['app']
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password.html',
            template: 'public/html/reset_password.html',
            inject: true,
            chunks: ['resetPassword']
        }),
    ],
}

现在，当我重建项目（现在只是尝试使用 WebpackDevServer）并导航到 时/index.html，我可以在网络选项卡中看到大量捆绑文件、index.html（基于ide.html模板的）内容以及对各种外部资源的请求。但是，不会运行实际的 JavaScript（例如， console.log in ide.js）。文件中的所有 HTML 都会显示。

对于reset_password.html，所有 HTML 显示，reset_password.js文件显示，但没有运行其中的 javascript。

如何确保entry文件中的 JavaScript运行？

编辑：我开始ide.js工作了，因为我没有意识到以下是“大块”：

optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },

所以，我添加vendor到index.htmlHtmlWebpackPluginchunks属性。现在，它看起来像这样：

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'public/html/ide.html',
    inject: true,
    chunks: ['app', 'vendor']
}),

reset_passwordnode_modules 文件夹中不需要任何东西，这也不能解释为什么根本没有 JavaScript 会在ide.js. 此外，reset_password仍然无法正常工作。

EDIT2：reset_password.js加载时reset_password.html查看明显附加的文件，我可以看到这一行

eval("\n\nconsole.log('DRAGONHELLO');//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvanMvcmVzZXRfcGFzc3dvcmQuanM/ZjY5ZSJdLCJuYW1lcyI6WyJjb25zb2xlIiwibG9nIl0sIm1hcHBpbmdzIjoiOztBQUNBQSxRQUFRQyxHQUFSLENBQVksYUFBWiIsImZpbGUiOiIuL3B1YmxpYy9qcy9yZXNldF9wYXNzd29yZC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIlxuY29uc29sZS5sb2coJ0RSQUdPTkhFTExPJylcbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./public/js/reset_password.js\n");

所以，显然我的console.log('DRAGONHELLO')被“看到”了，但我不知道为什么它没有运行。

EDIT3：添加vendor到chunksforreset_password.html导致 JavaScript 运行，但我不知道为什么，这是不理想的，因为练习的重点是有两个不同的包，一个非常小，不需要所有我们的node_modules。

EDIT4：我用 运行了 Webpack profile:true，我可以看到我没有弄错“块名称”：

                 js/app.3d18b43294ebd54ed083.js   1.34 MiB       0  [emitted]  [big]  app
       js/resetPassword.198485be2b163cc258ed.js   1.02 KiB       1  [emitted]         resetPassword
                   js/2.e7f92193ea3c611a0b36.js   2.23 MiB       2  [emitted]  [big]  vendor
             js/app.3d18b43294ebd54ed083.js.map   2.71 MiB       0  [emitted]         app
   js/resetPassword.198485be2b163cc258ed.js.map   4.57 KiB       1  [emitted]         resetPassword
               js/2.e7f92193ea3c611a0b36.js.map   7.12 MiB       2  [emitted]         vendor

EDIT5：我都试过了

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    }
  }
};

和

module.exports = {
  //...
  optimization: {
    runtimeChunk: true
  }
};

基于 PlayMa256 的评论和关于 runtimeChunk 的webpack 文档。两者都不会导致 JavaScript 执行。

Answer 1

这是一个多方面的问题。

首先，Html-Webpack-Plugin中存在一个错误，使其与 Webpack4 和多个入口点不兼容。它必须至少升级到v4.0.0-alpha.2才能工作。

其次，在新版本中，您无需使用 useoptimization.splitChunks.cacheGroups手动分离出 node_modules。这样做optimization.splitChunks.chunks = 'all'足以导致给定的入口点只在它的vendors-app-{{chunk_name}}块中获得它实际import的node_modules 。

所以如果你这样做

optimization: {
    splitChunks: {
        chunks: 'all'
    },
},

结合

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'public/html/ide.html',
        inject: true,
        chunks: ['app']
    }),
    new HtmlWebpackPlugin({
        filename: 'reset_password.html',
        template: 'public/html/reset_password.html',
        inject: true,
        chunks: ['resetPassword']
    }),
]

结合

entry: {
    app: './public/js/ide.js',
    resetPassword: './public/js/reset_password.js'
},

然后，您的 webpack 输出将具有

1. 应用程序
2. 重设密码
3. 供应商~应用程序~重置密码
4. 供应商~应用程序
5. 供应商~重置密码

除非您imports的resetPassword.js文件中没有，否则它看起来像

1. 应用程序
2. 重设密码
3. vendor~app~resetPassword（必要的 webpack 供应商包）
4. 供应商~应用程序

更多信息、图片和对话，请访问https://github.com/jantimon/html-webpack-plugin/issues/1053

请注意，chunksSortMode:对于最新版本，HtmlWebpackPlugin 对象不再是一个有效选项，它显然是在 webpack4 中默认完成的。