javascript - 如何在 Webpack 中使用多个条目以及 HtmlWebpackPlugin 中的多个 HTML 文件？

Question

我们希望 Webpack 有两个输出——我们的整个应用程序及其所有依赖项，以及一个只有一个依赖项的不同页面(主应用程序不共享)。

似乎这样做的方法是利用 entry Webpack 配置的属性。但是，这还不够，因为我们还使用 HtmlWebpackPlugin用 build.js 输出我们的 HTML 文件Webpack 编译动态添加(以及编译 LESS 等)。根据 HtmlWebpackPlugin 文档:

If you have multiple Webpack entry points, they will all be included with script tags in the generated HTML.

这对我们不起作用，所以我需要利用他们的 filterChunks选项。这个 GitHub issue response最简洁地说:

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 文档中，这是在“过滤 block ”部分下)

所以，我修改了我们的代码，如下所示:

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(例如， ide.js 中的 console.log)。显示文件中的所有 HTML。

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

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

编辑 : 我得到了 ide.js工作，因为我没有意识到以下是一个“ block ”:

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

所以，我加了 vendor到 index.html HtmlWebpackPlugin chunks属性(property)。现在，它看起来像这样:

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

reset_password node_modules 文件夹中不需要任何东西，这也不能解释为什么在 ide.js 中根本没有 JavaScript 会运行。 ，所以我还是很困惑。另外， 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')是“看到的”，但我不知道为什么它没有运行。

编辑3 : 添加 vendor至 chunks对于 reset_password.html导致 JavaScript 运行，但我不知道为什么，这是不理想的，因为练习的重点是有两个不同的包，一个非常小，不需要我们所有的 node_modules .

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

                 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 的评论和 webpack docs on runtimeChunk .两者都没有导致 JavaScript 执行。

Answer 1

这是一个多方面的问题。

一、there is a bug in Html-Webpack-Plugin这使得它与 Webpack4 和多个入口点不兼容。必须升级到v4.0.0-alpha.2至少要工作。

二、新版本不用使用 optimization.splitChunks.cacheGroups手动分离出 node_modules。做optimization.splitChunks.chunks = 'all'足以导致给定入口点仅进入其vendors-app-{{chunk_name}}分 block node_modules 它实际上 import s。

所以如果你这样做

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 输出将有

应用

重置密码

vendor~app~resetPassword

vendor ~app

vendor ~resetPassword

除非你没有 imports在您的 resetPassword.js文件，在这种情况下，它看起来像

应用

重置密码

vendor~app~resetPassword(必要的 webpack vendor 包)

vendor ~app

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

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