How to properly setup webpack config to include common chunks used in multiple page (and entry) app?

Question

Imagine having below structure of html files:

./home.html
./settings.html
./contact.html

Also having below js files

./nav.js <-- common - used in all html files
./home.js <-- used only in home.html, below follow the same rule
./settings.js
./contact.js

And some modules from node_modules:

"jquery" "moment"

that are being imported as if when required:

./home.js
import $ from "jquery";
(...)

I have setup webpack to have each entry point as each file name. Now what would be the way to include common js files such as `./nav.js" into each file?

entry: {
  home: "./resources/js/sections/home.js",
  settings: "./resources/js/sections/settings.js",
  (...)
} 
(...)
output: {
  filename: '[name].js',
}

// Option A

Import raw nav.js like another module in every subpage (home.js, contact.js, settings.js)

import nav from ./nav.js
nav();

// Option B

create another entry for ./nav.js and manually add bundled nav.js to each html alongside other bundled files.

entry: {
  (...)
  nav: "./resources/js/sections/nav.js"
}

nikokot · Accepted Answer · 2019-01-18 14:43:35Z

2

You may use HtmlWebPackPlugin in order to append scripts dynamically to your HTML pages.

First of all install the plugin:

npm install html-loader html-webpack-plugin --save-dev

Then use the config:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    nav: './resources/js/sections/nav.js',
    home: './resources/js/sections/home.js',
    settings: './resources/js/sections/settings.js',
    contact: './resources/js/sections/contact.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'), // folder where all tranformed files will be placed
  },
  rules: [
    {
      test: /\.html$/,
      use: [{ 
        loader: "html-loader", 
        options: { minimize: true } 
      }]
    }
  ],
  plugins: [
    // create an instance of HtmlWebPackPlugin for every page of a multipage website
    new HtmlWebPackPlugin({
      template: "./resources/html/home.html", // take html from this path
      filename: "./home.html", // name it 'home.html' and insert to the root of output folder
      chunks: ['nav', 'home'] // insert dymamically nav.js and home.js to home.html
    }),
    new HtmlWebPackPlugin({
      template: "./resources/html/settings.html",
      filename: "./settings.html",
      chunks: ['nav', 'settings']
    }),
    new HtmlWebPackPlugin({
      template: "./resources/html/contact.html",
      filename: "./contact.html",
      chunks: ['nav', 'contact']
    }),
  ]
}

answered Jan 18, 2019 at 14:43

nikokot

1145 bronze badges

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

5 Comments

Dom Over a year ago

Thank you. As far as I can tell the HtmlWebPackPlugin will create a new html file, which is going to overwrite my current html, that is full of skeleton html tags and a lot of content??

nikokot Over a year ago

It will keep your html file as it is but will append scripts at the end of body tag

Dom Over a year ago

Thank you, I guess that would be the way to do it, but my html files are also templated via php, therefore no <body> tag is present.

nikokot Over a year ago

Have you tried the configuration? Maybe Webpack will append the scripts at the end of HTML if there's no body. Good luck!

Dom Over a year ago

Hi again, it did output it at the end of the file which is not quite correct but never mind... It also did not include any other files that home.html is sharing vendors with - I mean vendors~home and vendors-home-contact etc. But hey, I learned something new :)

Collectives™ on Stack Overflow

How to properly setup webpack config to include common chunks used in multiple page (and entry) app?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related