如何在 WebPack 输出中包含多个页面？

Question

我正在使用 WebPack 编译 ColdFusion 应用程序，一切似乎都编译得很好。正如您从下面的配置中看到的，我还尝试在 dist 文件夹中包含一个 HTML 文件，并确保在显示应用程序时调用它。const path = require("path");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const HtmlWebPackPlugin = require("html-webpack-plugin");module.exports = {  mode: "production",  entry: {    vendor: "./src/vendor.js",    main: "./src/index.js"  },    output: {    filename: "[name].[contenthash].bundle.js",    path: path.resolve(__dirname, "dist")  },  plugins: [    new HtmlWebPackPlugin({      template: "./src/template.cfm",      filename: "index.cfm",      minify: false    }),    new HtmlWebPackPlugin({        template: "./src/help.html",        filename: "help.html",    }),      new CleanWebpackPlugin({      cleanOnceBeforeBuildPatterns: ['**/*', '!application.cfc']    })  ],  module: {    rules: [            {                test: /\.html$/,                use: ["html-loader"],            },                  {                test: /\.css$/,                use: [                    "style-loader", //3. inject styles into dom                    "css-loader", //2. turns css into common js                ],            },            {                test: /\.scss$/,                use: [          "style-loader",           "css-loader",           "sass-loader"        ],            }    ]  }  };

Answer 1

module.exports = {

  entry: {

    index: './src/index.js'

  },

  // ...

  plugins: [

    new HtmlWebpackPlugin({

        template: './src/index.html',

        inject: true,

        chunks: ['index'],

        filename: 'index.html'

    }),

  ]

};

上面我们index.js在每个页面中重用文件chunks: [‘index’]来更改此设置，只需添加新的Javascript文件about.js contacts.js，然后在条目配置中使用这些文件并在配置选项中引用它 HtmlWebpackPlugin：

//...

entry: {

    index: './src/index.js',

    about: './src/about.js', 

    contacts: './src/contacts.js'

},

//...

plugins: [

  new HtmlWebpackPlugin({

      template: './src/about.html',

      inject: true,

      chunks: ['about'],

      filename: 'about.html'

  }),

所以你需要在entry使用的块中声明plugins。