Background knowledge

The difference between a single-page application and a multi-page application is the number of entries.

  • Single-page apps have only one entry
  • Multi-page applications have multiple portals

When we open a browser to visit a website, we first load the HTML file of the site, usually index.html. In this index.html file loading process encountered script tag or link tag, and then to the server side request related resources. If a site has only one entry HTML file, then the corresponding application of the site is a single page application. In contrast, users can access the application through HTML in more than one way. This is the multi-entry reference.

The build process

Start by defining three entries entries.js

Module. exports = [{name: 'coronavirus-disease-19', port: 1000, title: 'COVID-19'}, {name: 'coronavirus-disease-19'} 'Bench ', port: 6000, title:' Appearances of Sherlock Holmes ', {name: 'video-steding-statistics ', port: 9000, title: }];Copy the code

Write the webpack.config.js file

const path = require('path');
const entries = require('./build/entries');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

function resolve(args) {
  return path.resolve(__dirname, args);
}

const enteryData = {};
const htmlPlugins = [];
entries.forEach(elem => {
  enteryData[elem.name] = resolve(`src/${elem.name}/main.ts`);
  htmlPlugins.push(
    new HtmlWebpackPlugin({
      template: resolve('public/index.html'),
      favicon: resolve('public/favicon.ico'),
      filename: `${elem.name}.html`,
      title: elem.name,
      chunks: [elem.name]
    })
  );
});

module.exports = {
  entry: enteryData,
  output: {
    filename: '[name].bundle.js',
    path: resolve('dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader']
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: ['\.vue$'] 
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.(css|less)$/,
        use: ['css-loader', 'less-loader']
      },
      {
        test: /\.(jpg|png|svg)$/,
        use: ['file-loader']
      },
    ]
  },
  resolve: {
    alias: {
      '@': resolve('src')
    },
    extensions: [".ts", ".js", ".vue"]
  },
  plugins: [
    ...htmlPlugins,
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ]
}
Copy the code

Matters needing attention

When building a multi-page application based on WebPack, there are two things to pay attention to: an entry and an HTML file.

  • EnteryData is an object. Key is the file name and value is the entry path.
  • HtmlPlugins are arrays, each entry corresponding to an HTMl-webpack-plugin.

Take an example of the HTML-webpack-plugin

    new HtmlWebpackPlugin({
      template: resolve('public/index.html'),
      favicon: resolve('public/favicon.ico'),
      filename: `${elem.name}.html`,
      title: elem.name,
      chunks: [elem.name]
    })
Copy the code

Note that chunks must be filled in and the value is the HTML file name for a specific application. If it is missing, it will cause any HTML file to import all JS files, for example, the coronavirus-disease-19.html file only needs to import coronavirus-disease-19.js file. However, the missing chunks result in the following:

<! doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="icon" href="favicon.ico"> </head> <body> <div id="app"></div> <script src="coronavirus-disease-19.bundle.js"></script> <script src="character-appearances.bundle.js"></script> <script src="wechat-steps-statistics.bundle.js"></script> </body> </html>Copy the code

The contents of the dist folder after packaging

The content of the coronavirus-disease-19.html file is as follows:

<! doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title></title> <link rel="icon" href="favicon.ico"> </head> <body> <div id="app"></div> <script src="coronavirus-disease-19.bundle.js"></script> </body> </html>Copy the code

The development environment

In a development environment, webpack-dev-server is also configured.

  devServer: {
    port: 9000,
    open: true,
    openPage: `${entries[0].name}.html`
  }
Copy the code

Notice the openPage option here. It means which entry is entered by default. If it is missing, webpack-dev-server will not find the entry file because there is no default entry file specified when you type HTTP :localhost://9000 in the address bar.

In the case of configuring openPage as the first entry, what we see is

Pay attention to what’s in the address bar and what it reminds you of. I see…

Complete the case

Multi-page complete case