How to include multiple pages in 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

正如这里评论的：

\n

module.exports = {\n\n  entry: {\n    index: \'./src/index.js\'\n  },\n\n  // ...\n\n  plugins: [\n    new HtmlWebpackPlugin({\n        template: \'./src/index.html\',\n        inject: true,\n        chunks: [\'index\'],\n        filename: \'index.html\'\n    }),\n  ]\n};\n

\n

\n

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

\n

\n

//...\nentry: {\n    index: \'./src/index.js\',\n    about: \'./src/about.js\', \n    contacts: \'./src/contacts.js\'\n},\n//...\nplugins: [\n  new HtmlWebpackPlugin({\n      template: \'./src/about.html\',\n      inject: true,\n      chunks: [\'about\'],\n      filename: \'about.html\'\n  }),\n

\n

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

\n