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

Question

I am compiling a ColdFusion application with WebPack and everything seems to be compiling just fine. As you can see from the config below, I'm also trying to include an HTML file in the dist folder and ensure it's being called when I display the application.

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"
        ],
            }
    ]
  }  
};

This is the error file I'm receiving:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\jlnewnam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.18.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle create-webpack-app@1.0.0~prestart: create-webpack-app@1.0.0
6 info lifecycle create-webpack-app@1.0.0~start: create-webpack-app@1.0.0
7 verbose lifecycle create-webpack-app@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle create-webpack-app@1.0.0~start: PATH: C:\Users\jlnewnam\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;V:\AppHome\wwwroot\jared\studio_webpack\node_modules\.bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\jlnewnam\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Python36\Scripts;C:\Program Files\Python36;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\PuTTY;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn;%JAVA_HOME%;C:\Program Files\Git\cmd;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn;C:\Program Files\nodejs;C:\Program Files\dotnet;C:\Users\jlnewnam\AppData\Local\Microsoft\WindowsApps;C:\Users\jlnewnam\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\jlnewnam\AppData\Local\Programs\Microsoft VS Code Insiders\bin;%JAVA_HOME%;C:\Users\jlnewnam\AppData\Roaming\npm;C:\Program Files (x86)\GitHub CLI;C:\Users\jlnewnam\.dotnet\tools
9 verbose lifecycle create-webpack-app@1.0.0~start: CWD: V:\AppHome\wwwroot\jared\studio_webpack
10 silly lifecycle create-webpack-app@1.0.0~start: Args: [ '/d /s /c', 'webpack --config webpack.dev.js' ]
11 silly lifecycle create-webpack-app@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle create-webpack-app@1.0.0~start: Failed to exec start script
13 verbose stack Error: create-webpack-app@1.0.0 start: `webpack --config webpack.dev.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\jlnewnam\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\jlnewnam\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid create-webpack-app@1.0.0
15 verbose cwd V:\AppHome\wwwroot\jared\studio_webpack
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\jlnewnam\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.18.4
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error create-webpack-app@1.0.0 start: `webpack --config webpack.dev.js`
22 error Exit status 1
23 error Failed at the create-webpack-app@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

As commented here :

module.exports = {

  entry: {
    index: './src/index.js'
  },

  // ...

  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: true,
        chunks: ['index'],
        filename: 'index.html'
    }),
  ]
};

Above we are reusing index.js file in every page with chunks: ['index'] to change this just add new Javascript files about.js contacts.js then use those in entry configuration and reference it in HtmlWebpackPlugin configuration options:

//...
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'
  }),

So you need to declare in entry the used chunks in plugins .