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

【问题标题】：How to include multiple pages in WebPack output?如何在 WebPack 输出中包含多个页面？
【发布时间】：2021-02-25 17:20:32
【问题描述】：

我正在用 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"
        ],
            }
    ]
  }  
};

这是我收到的错误文件：

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 ]

【问题讨论】：

不确定你真正想要什么？
@tmhao2005 - 我已经更新了 OP 描述。我还在 HtmlWebPackPlugin 属性中添加了要包含的 HTML 文件。
您的配置看起来不错。现在还不行吗？
我已经用调试日志更新了 OP。
看起来您无法运行脚本，这意味着它与配置无关，因此您可能需要重新安装 deps

标签： javascript html json webpack

【解决方案1】：

正如评论here：

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 中使用的块。

【讨论】：