Introduction to the

We can not only write one page, each time to write many pages, then for the sake of development efficiency, we use the front-end automation tool Webpack, so how does Webpack pack pages? How do you package multiple pages?

Single page packaging

We know how to package a single page, very simple, configuration entry, and HTML plug-in,

const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path: path.join(__dirname, 'dist'),
        filename: 'js/index.js'
    }
    ...
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            hash: true,
            minify: {
                removeAttributeQuotes:true,
                removeComments: true,
                collapseWhitespace: true,
                removeScriptTypeAttributes:true,
                removeStyleLinkTypeAttributes:true
            }
        })
    ]
}
Copy the code

HTMLWebpackPlugin

How to package multiple pages

After learning Webpack, MY feeling is that I can configure Webpack and run it, but in the learning process, there are only one page, so how to package so many pages? In fact, the principle of multi-page packaging and single-page packaging is the same, just configure several corresponding entrance, and exit, and HtmlWebpackPlugin object; Of course, you could do something like this:

Const config = {entry:{index:'./ SRC /index.js', info:'./ SRC /index.js'}, output:{path: path.join(__dirname, 'dist'), filename: 'js/[name].js' } ... plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html', chunks:['index'], hash: true, minify: { removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true } }), new HtmlWebpackPlugin({ filename: 'info.html', template: './src/info.html', hash: true, chunks:['info'], minify: { removeAttributeQuotes:true, removeComments: true, collapseWhitespace: true, removeScriptTypeAttributes:true, removeStyleLinkTypeAttributes:true } }) ] }Copy the code

If you are careful, you will notice that I have changed several places. First, I changed the ‘js/index.js’ of output.filename to’ js/[name].js’. This is because we have multiple pages, and each page has a corresponding JS, which is convenient for management. The chunks attribute is added to the HtmlWebpackPlugin object. The chunk attribute allows you to select the corresponding JS module.

There’s nothing wrong with two pages, but ten or more. We do the same thing all the time. That’s not what we do as programmers. (and, of course, the high salary (#^.^#)).

First, we retrieve our existing HTML or JS from Node’s Glob object.

/** ** @param {string} globPath file path * @returns entries */ function getView(globPath,flag){let files = glob.sync(globPath); let entries = {}, entry, dirname, basename, pathname, extname; files.forEach(item => { entry = item; dirname = path.dirname(entry); // Current directory extName = path.extName (entry); // suffix basename = path.basename(entry, extname); // File name pathName = path.join(dirname, basename); // File path if (extName === '.html') {entries[pathName] = './' + entry; } else if (extname === '.js') { entries[basename] = entry; }}); return entries; }Copy the code

Now that we have the getView() function to get HTML and JS files, we can determine how many entries and how many pages there are;

let entriesObj = getView('./src/js/*.js');

let config = {
    entry:entriesObj,
    ...
}
Copy the code

Above we have configured the entry, we do not need to manually add, how many JS there are as many entries;

let pages = Object.keys(getView('./src/*html'));

pages.forEach(pathname => {
    let htmlname = pathname.split('src\\')[1];
    let conf = {
        filename: `${htmlname}.html`,
        template: `${pathname}.html`,
        hash: true,
        chunks:[htmlname],
        minify: {
            removeAttributeQuotes:true,
            removeComments: true,
            collapseWhitespace: true,
            removeScriptTypeAttributes:true,
            removeStyleLinkTypeAttributes:true
        }
    }

    config.plugins.push(new HtmlWebpackPlugin(conf));
});
Copy the code

Finally, we get HTML page, and add corresponding page HTMLWebpackPlugin object;

Afterword.

other

Refer to other WebPack configurations