Previously, I wrote a configuration for a web pack multi-page application with only one webpack.config.js file, which implements css,js, and resource file processing for multi-entry configuration packaging.Since the entry configuration needs to be added by itself, how many pages of HtmlWebpackPlugin have to be added by itself.So while the configuration was successful, it was too mechanized and not desirable

Why multi-page application configuration?

We all know that when developing vue,react applications, there is usually only one entry file.And the authorities provide their own scaffolding.These scaffolds are cumbersome and will not meet our requirements if they deviate from the environment we actually develop.Although there are many multi-page configurations written by others, they feel that the configuration is too cumbersome, the module separation is too serious (I do not understand, _), and is not suitable for beginners to learn to use.

Many traditional web pages still need to write a lot of static interfaces, such as our company, the website of the official website display class.If you want to follow the traditional development pattern, we add css files, js files for different pages, which greatly increases the workload and is very dull.And es6,scss, is not available.
So this multipage webpack configuration is designed to address these issues and embrace es6.

Full configuration: webpack-M-pages

First look at the catalog of the lower scaffolding

│  .babelrc
│  .gitignore
│  a.txt
│  base.plugin.js //Dynamic Generation of HtmlWebpackPlugin
│  entry.config.js//Read multi-page entry file
│  package.json
│  pagesArray.js //Get multipage files, parameters for HtmlWebpackPlugin
│  README.md
│  utils.js  //Production and Development Environment
│  webpack.config.js
│  
└─src
    ├─common //Common Styles
    │  ├─css
    │  │      reset.css
    │  │      
    │  └─js  //Common js
    │          common.js
    │          easyTable.js
    │          
    ├─css
    │  │  bootstrap.css
    │  │  index.css
    │  │  
    │  ├─pageA
    │  │      a.css
    │  │      as.scss
    │  │      
    │  ├─pageB
    │  │      b.css
    │  │      bb.scss
    │  │      
    │  └─pageC
    │          c.css
    │          
    ├─fonts
    │      glyphicons-halflings-regular.eot
    │      glyphicons-halflings-regular.svg
    │      glyphicons-halflings-regular.ttf
    │      glyphicons-halflings-regular.woff
    │      glyphicons-halflings-regular.woff2
    │      
    ├─img
    │      ph.jpg
    │      
    ├─js
        │      index.js
        │      mod.js
        │      pageA.js
        │      pageB.js
        │      pageC.js
        │      testm.js
        │      
        ├─lib
        │      easyTable.js
        │      mod.js
        │      
        └─pages
                index.html
                pageA.html
                pageB.html
                pageC.html

Packed catalog

│  index.html
│  pageA.html
│  pageB.html
│  pageC.html
│  
└─static
    ├─css
    │      index.css
    │      index.css.map
    │      pageA.css
    │      pageA.css.map
    │      
    ├─fonts
    │      glyphicons-halflings-regular.eot
    │      glyphicons-halflings-regular.ttf
    │      glyphicons-halflings-regular.woff
    │      glyphicons-halflings-regular.woff2
    │      
    ├─img
    │      glyphicons-halflings-regular.f721466.svg
    │      ph.50e1eb2.jpg
    │      
    └─js
            indexa94351a6f2b24f4c647a.js
            moda94351a6f2b24f4c647a.js
            pageAa94351a6f2b24f4c647a.js
            pageBa94351a6f2b24f4c647a.js
            pageCa94351a6f2b24f4c647a.js
            testma94351a6f2b24f4c647a.js
            vendorsa94351a6f2b24f4c647a.js
            

How do I automatically inject entry configuration?

The entry configuration for the webpack is like this

module.exports = {
    devtool: '#source-map',
    entry:{
        index:'',
        about:'',
        home:'',
        .....
       }
    }

1. The problem is coming. What should I do when there are many entrance files?Write one by one?Obviously this is not possible.How to solve it?

Of course, read the files under the folder and write the configuration choke.

//entry.config.js
var path = require('path');
var fs = require('fs');
let entry_files = {};
function each_file(dir) {
    try {
        fs.readdirSync(dir).forEach(function (file) {
            var file_path = dir + '/' + file;
            var fname = path.basename(file, '.js');
            entry_files[fname]=file_path;
        })
    } catch (e) {

    }
}
each_file('./src/js');
//entry_files is an object object that traverses through js files in the js folder and writes in the format that entry needs to configure.
module.exports=entry_files;

OK, so our entry profile can be abbreviated like this.

var entry_files=require('./entry.config');
module.exports = {
    devtool: '#source-map',
    entry: entry_files,
    
    }

How do I automatically configure HtmlWebpackPlugin?

This is actually the same as the auto-injection entry configuration, so let's first look at the configuration of HtmlWebpackPlugin

new HtmlWebpackPlugin({
        template: '',//Your html page address
        filename: '',//Name of html after generation
        chunks: ['vendors'],
        // hash:true,
        minify: {
            removeComments: true,
            collapseWhitespace: false //Remove whitespace and line breaks
        }
    });

OK, the same way we read the html template file and write it in the desired format

//pagesArray.js
var path = require('path');
var fs = require('fs');
let pagesArray = [];
function each_file(dir) {
    try {
        fs.readdirSync(dir).forEach(function (file) {
            /*
            * {
            *   index:'./src/index.html',
            *   chunkname:'index'
            * }
            * */
            var file_obj={};
            var file_path = dir + '/' + file;
            var chunk_name = path.basename(file, '.html');
            file_obj['filename']=file;
            file_obj['template']=file_path;
            file_obj['chuckName']=chunk_name;
            pagesArray.push(file_obj)
        })
    } catch (e) {

    }
}
each_file('./src/pages');
//Export the html template information we need
module.exports=pagesArray;

/*Walk through pages, add configurations*/
pagesArray.forEach((page)=>{
    const htmlPlugin = new HtmlWebpackPlugin({
        template: page.template,
        filename: page.filename,
        chunks: ['vendors', page.chuckName],
        // hash:true,
        minify: {
            removeComments: true,
            collapseWhitespace: false //Remove whitespace and line breaks
        }
    });

    base_plugin.push(htmlPlugin)

Then you can configure the webpack like this

  plugins: require('./base.plugin')

So even if we've finished multi-page configuration, isn't it good?

Reminder

How to use cmd command to generate file tree under windows?

tree /f > tree.txt

Like it, give it a star t if you find it useful.