vue+webpack4 multi-page packaging configuration

There are usually two forms of multi-page configuration, one is multi-page multi-configuration, the other is multi-page single configuration. Because webpack (more than 3.1) can directly process an array of configuration objects, it is possible to write a configuration for each page individually.
 
Generally speaking, the advantages of multi-configuration are flexible and independent configuration, which can be packaged in parallel, thus improving the packaging speed. The disadvantage is that the code can not be shared among multi-pages (after one page is loaded, the next page has to be loaded again); the characteristics of single configuration are basically relative to multi-configuration. Specific use of which form, depending on the specific business situation. This paper mainly introduces the form of single configuration.
 

1. Overall directory structure

To facilitate packaging, we create a folder of pages, under which we create subfolders representing pages, and each subfolder establishes its own spa application system, as shown in the figure:

The advantage of this is that when we configure the packaging portal of webpack, it is easy to operate and the structure is clear.
 

2. webpack configuration

2.1 File Structure

Create three files: base, dev and prod. We configure entry, output, loader, public plugin and so on in the base file, and add, delete and modify in different files according to the development environment and online environment.

2.2 entry

According to the overall directory structure, each page folder has its own entry js file. When we configure the entry option, we can write it as follows:

/**
 * Reduce coding complexity by convention
 * Every new entry, that is to say, a folder is added under the src/pages directory, named after the page name, and an index.js is built-in as the entry file.
 * Scanning pages directory through node's file api
 * This gives you an object like {page1:'Entry File Address', page2:'Entry File Address',...}
 */
const getEntries = () => {
    let result = fs.readdirSync(pagesDirPath);
    let entry = {};
    result.forEach(item => {
        entry[item] = path.resolve(__dirname, `../src/pages/${item}/index.js`);
    });
    return entry;
}

module.exports = {
    entry: getEntries()
    
    ...
}

2.3 output

The configuration options of output are as follows. The directory structure after the package is typed is shown in the figure.

//Determine whether it is a development environment?
const devMode = process.env.NODE_ENV === "development"; 

module.exports = {
    ...
    
    output: {
        publicPath: devMode ? "" : "/",
        //The name here is the name of each key value in our entry object, which is the name of the folders we created in the pages directory.
        filename: devMode ? "[name].js" : "static/js/[name].[chunkhash].js",
        path: path.resolve(__dirname, "../dist")
    }
    
    ...
}

2.4 html-webpack-plugin

After configuring entry and output, you need to generate a separate HTML file for each page, which is to create an instance of html-webpack-plugin for each page:

/**
 * Scan pages folder to generate a plug-in instance object for each page
 */
const generatorHtmlWebpackPlugins = () => {
    let arr = [];
    let result = fs.readdirSync(pagesDirPath);
    result.forEach(item => {
        //Determine if you have your own index.html in the page directory
        let templatePath;
        let selfTemplatePath = pagesDirPath + `/${item}/index.html`;
        let publicTemplatePath = path.resolve(__dirname, "../src/public/index.html");
        try {
            fs.accessSync(selfTemplatePath);
            templatePath = selfTemplatePath;
        } catch(err) {
            templatePath = publicTemplatePath;
        }
        arr.push(new HtmlWebpackPlugin({
            template: templatePath,
            filename: `${item}.html`,
            chunks: ["manifest", "vendor", item]
        }));
    });
    return arr;
}

module.exports = {
    ...
    
    plugins: [
        ...generatorHtmlWebpackPlugins()
    ]
    
    ...
}

For the sake of flexibility, this paper judges whether there are html template files in each page subfolder; if not, template path can be directly defined as the address of common html files.

2.5 Other Configurations

Basically, the first few configurations are the prototype of a multi-page packaging configuration. In addition, you can configure the optimal configuration of production environment packaging such as optimization, mini-css-extract-plugin. You can see all the configuration information in the github address at the end of the article.

3. Multi-page + SPA

Although this is a multi-page application, each page can also be made into a spa, if you have this requirement; in addition, you can configure the @babel/plugin-syntax-dynamic-import plug-in to support import(), code segmentation and lazy loading at the router level.

attach

Original Code Address: https://github.com/gww666/2-m...