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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~start: CWD: V:\AppHome\wwwroot\jared\studio_webpack
10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'webpack --config webpack.dev.js' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] start: `webpack --config webpack.dev.js`
22 error Exit status 1
23 error Failed at the [email protected] 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 - I've updated the OP description. I've also added in the HtmlWebPackPlugin properties with the HTML file I'm trying to include. — Millhorn
– Millhorn, Commented Nov 13, 2020 at 17:49
Looks like you was unable to run your script which means it's unrelated to the configuration so you might need to reinstall deps again — tmhao2005
– tmhao2005, Commented Nov 13, 2020 at 18:03

emi · Accepted Answer · 2020-11-17 20:11:28Z

3

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.

edited Nov 17, 2020 at 20:11

answered Nov 17, 2020 at 20:05

emi

3,1081 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to include multiple pages in WebPack output?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related