1. Multi-page application (MPA)

Single page application SPA: there is only one HTML document, js senses the change of URL, JS dynamically removes the content of the current page, and then mounts the content of the next page to the page. This is a single page application, and there is no need to request a new HTML document for each jump.

Multi-page application MPA: Each time the page jumps, the server will return a new HTML document, this type of website is multi-page website, also called multi-page application.

Second, basic ideas

Each page corresponds to an entry and an HTML-webpack-plugin, as shown in the following code example:


module.exports = {
    entry:{
        index:'./src/index/index.js',
        search:'./src/search/index.js'}}Copy the code

Disadvantages: WebPack configuration needs to be modified every time a page is added or deleted. When there are too many pages, a lot of HTML-webpack-plugin configurations will be written, resulting in a lengthy webpack configuration file, which is not conducive to maintenance.

Iii. General scheme

The number of HTML-webpack-plugin is automatically set according to the entry information.

The contents of the page are all placed under the SRC folder, and each page has a separate folder. The HTML and JS files are all named index, and the index.js files in each sub-folder under the SRC folder are dynamically obtained by glob. Sync of the Glob module as the entry file of each page.

Get all entry file paths:

const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js'))
Copy the code

Iterate through the entry file collection to create htmL-webpack-plugin Settings:

const entry = {}; // Entry object const htmlWebpackPlugins = []; Keys (entryFiles).map(index => {const entryFiles = entryFiles[index]; // const entryFiles = entryFiles[index]; Const match = entryfil. match(/ SRC \/(.*)\/index\.js/); const pathname = match && match[1]; // Set the entry object entry[pathName] = entryFil; Htmlwebpackplugins. push(new HtmlWebpackPlugin({template:path.join(__dirname, 'SRC /)${pathname}/index.html`),
            filename:`${pathname}.html`,
            chunks:[pathname],
            inject:true,
            minify:{
                html5:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyJS:true,
                minifyCSS:true,
                removeComments:false}}})))Copy the code

Modify the WebPack configuration:

module.exports = { entry:entry, ... plugins:[ ... ] .concat(htmlWebpackPlugins) }Copy the code

4. Complete code

const path = require('path');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const setMpa = () => { const entry = {}; // Entry object const htmlWebpackPlugins = []; Const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js')); Object.keys(entryFiles).map(index => { const entryFil = entryFiles[index]; Const match = entryfil. match(/ SRC \/(.*)\/index\.js/); const pathname = match && match[1]; // Configure entry file object entry[pathName] = entryFil; Htmlwebpackplugins. push(new HtmlWebpackPlugin({template:path.join(__dirname, 'SRC /)${pathname}/index.html`),
                filename:`${pathname}.html`,
                chunks:[pathname],
                inject:true,
                minify:{
                    html5:true,
                    collapseWhitespace:true,
                    preserveLineBreaks:false,
                    minifyJS:true,
                    minifyCSS:true,
                    removeComments:false}}})));return {
        entry,
        htmlWebpackPlugins
    }
};

const { entry, htmlWebpackPlugins } = setMpa();
module.exports = {
    entry:entry,
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name]_[chunkhash:5].js'
    },
    mode:'production', module:{ rules:[ ... ]  }, plugins:[ new CleanWebpackPlugin(), ].concat(htmlWebpackPlugins) }Copy the code

Series of links:

  • Webpack Basics (1)
  • Webpack Basics (2)