Code examples for building multi-page applications using webpack

This article brings you code examples about using webpack to build multi-page applications. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Background: With the three major front-end frameworks of react, vue, and angular becoming more stable in the front-end field, SPA applications are being applied to more and more projects. However, in some special application scenarios, traditional multi-page applications need to be used. When using webpack for project engineering construction, corresponding adjustments are also required.

Differences from SPA applications

In SPA applications, after using webpack to build the project, an html file, several js files, and several css files will be generated. In the html file, all js and css files will be referenced. \
In a multi-page application, after using webpack to build the project, multiple html files, multiple js files, and multiple css files will be generated. In each html file, only the js and css files corresponding to the page are referenced.

Webpack configuration

Entry settings

The packaging of multi-page applications will correspond to multiple entry js files and multiple html template files. Assume that our multi-page directory in development status is like this:

    |--page1
        |--index.html
        |--index.js
        |--index.less
    |--page2
        |--index.html
        |--index.js
        |--index.less

includes two pages, page1 and page2, and their corresponding js and less files. Then when using webpack to build the project, there are two entry files page1->index.js and page2->index.js, andpage1->index.html and page2->index.html are two template files. However, when building a project, it is impossible to specify an entry configuration for each page. \
To automatically match all page entries and template files, there are two methods. \
\
Method 1: Use the fs file system of node. to read all subfolders under the parent folder. All pages are automatically matched by folder name. However, this method requires keeping the files in the parent folder clean. Otherwise, specific judgment logic needs to be used to filter out all entry directories. \
\
Method 2: Configure the entrance through the configuration file. For example:

    entry: ['page1', 'page2'];

This way, all entry directories can be specified accurately. However, every time you add a page, you need to change the configuration file. \
Both methods have their own characteristics and can be chosen according to specific circumstances.

Specific configuration

entry

The entry configuration needs to be added cyclically based on the entry data we obtain.

    const entryData = {};
    entry.forEach(function (item) {
        entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
    })

output

The output configuration is consistent with the SPA application and no special configuration is required.

    output: {
        filename: 'public/[name]_[chunkhash:8].js',
        path: path.join(__dirname, `../dist/`),
        publicPath: '/'
    },

HtmlWebpackPlugin

When building with webpack. You need to use the html-webpack-plugin plug-in to generate project templates. For multi-page applications that need to generate multiple templates, multiple html template files also need to be generated. Similarly, use the obtained entry file data to add in a loop.

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HtmlWebpackPluginData = [];
    entry.forEach(function (item) {
        HtmlWebpackPluginData.push(
            new HtmlWebpackPlugin({
                filename: `${item}.html`,
                template: path.join(__dirname, `../src/pages/${item}/index.html`),
                chunks: [item]
            })
        );
    })

In configurationchunks must be configured. If not configured, all js and css files will be imported into each template file. . If specified as the configuration name in entry, only the files related to the entry will be imported.

Configuration combination

The next step is to combine the previous entry, output, htmlWebpackPlugin configurations. Other than this, other configurations are consistent with the SPA application and do not need to be processed separately. The combination is as follows

    modules.exports = {
        entry: { ...entryData },
        output: {
            filename: 'public/[name]_[chunkhash:8].js',
            path: path.join(__dirname, `../dist/`),
            publicPath: '/'
        },
        plugins: [
            ...HtmlWebpackPluginData
        ]
        ...
    }

The complete demo can be viewedMulti-page application demo

The above is the detailed content of Code examples for building multi-page applications using webpack. For more information, please follow other related articles on the PHP Chinese website!