如何在 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。