Question

想要实现 我想使用webpack捆绑我的js文件和依赖项，并将特定文件“注入”到特定生成的html文件中。（这不是SPA）

我的Webpack.config.js如下所示：

module.exports = {
 entry: {
     vendor:"./js/SomeVendor.js",
     app: "./index.js",
     home: "./home.js"
        },
 output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name]-[hash].bundle.js"
  },
 module: {
    rules: [
       . . . . .
         ]
 },
 plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "Custom template",
      template: "index.html"
    }),
    new HtmlWebpackPlugin({
      title: "Custom template",
      filename: "home.html",
      template: "home.html"
   })
  ]
};

现在，我希望新生成的'Home.html '应该只包含'home-hash.bundle.js'和'vendor.bundle.js' 和类似的'Index.html'['app-hash.bundle.js'和'vendor.bundle.js']

方法1

我牺牲了捆绑名称的“散列”，并且不将.js文件“注入”到.html文件中。相反，我手动将它们包含在名称为.html等的各个app.bundle.js文件中。

还有其他方法吗？

Answer 1

感谢@ PlayMa256 我按照您的建议使用了块选项来完成它。在此处发布答案以供他人参考。

plugins: [
    new HtmlWebpackPlugin({
      filename: "custom1.html",
      chunks: ['custom1'],
      template: "app/components/custom1/index.html"
    }),

是否可以使用Webpack将选择性的[.js]文件包含到特定的生成的[.html]页面中？

1 个答案: