Webpack4 Development with Pug template engine

Project Address

Why

A few days ago a colleague took a few HTML files and asked me how to get the public head out of the style changes, I have no way to find out how to solve, and then think.
How do you implement multiple pages that share the same HTML code?
So I have this article.

Initialization

npm init -y

Installing Webpack

npm install webpack webpack-cli --save-dev

Installing Pug-html-loader Html-loader

npm install pug-html-loader html-loader --save-dev

Package.json

{  "Name": "Demo1",  "Version": "1.0.0",  "Main": "Index.js",  "License": "MIT",  "Devdependencies": {    "Clean-webpack-plugin": "^0.1.19",    "Css-loader": "^0.28.11",    "Html-loader": "^0.5.5",    "Html-webpack-plugin": "^3.2.0",    "Pug-html-loader": "^1.1.5",    "Style-loader": "^0.21.0",    "Webpack": "^4.12.0",    "WEBPACK-CLI": "^3.0.8",    "Webpack-dev-server": "^3.1.4"  },  "Scripts": {    "Start": "Webpack-dev-server--mode development--open",    "Dev": "Webpack--mode Development",    "Build": "Webpack--mode production"  }}

Webpack configuration file

' use strict ';ConstPath= require(' path ');ConstHtmlwebpackplugin= require("Html-webpack-plugin");ConstCleanwebpackplugin= require(' Clean-webpack-plugin ');Module.exports = {  entry: {    app: './src/js/index.js ',    Main: './src/js/index.js '  },  Output: {    Path: Path.Resolve(__dirname, ' Dist '),    filename: ' Js/[name]-[chunkhash].js ',  },  Module: {    rules:[{      Test: /\.Pug$/,       Use:[' Html-loader ',        ' Pug-html-loader '],    }]},  Resolve: {},  Devtool: ' Inline-source-map ',  Plugins:[New Cleanwebpackplugin([' Dist ']), //Clear the previously generated files    New Htmlwebpackplugin({      Template: './src/my-index.pug ',      chunks:[' main ']//Packaging only main.js, this way to achieve multi-page development    })  ]};

Webpack4 Development with Pug template engine