What is a Multi-page Application (MPA)

Multi-page applications, as the name implies, have multiple portals, with each business having its own page. Each time the page jumps, the server pulls a new HTML document back to the client, the page reloads the new document, and the resource is re-downloaded.

What are the advantages of multi-page apps?

  • Pages are decoupled from each other.
  • Search engines are HTML-aware, whereas MPA puts all the content on every page in HTML, so it’s more SEO friendly.

The disadvantages of multi-page applications are also obvious, because each jump needs to send an HTTP request, which is bound to affect the page switching speed and is not friendly to users with slow network speed.

Packaging of multi-page applications

entry

Our multi-page application has n entry points, and in WebPAC we need to configure n separate entry points, that is, n separate dependency graphs:

// webapck.config.js

module.exports = {
  entry: {
    pageOne: "./src/pageOne/index.js".pageTwo: "./src/pageTwo/index.js".pageThree: "./src/pageThree/index.js",},// ...
};
Copy the code

html-webpack-plugin

Our multi-page application has n entries and also needs n htML-webpack-plugins:

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

module.exports = {
  entry: {
    pageOne: "./src/pageOne/index.js".pageTwo: "./src/pageTwo/index.js".pageThree: "./src/pageThree/index.js",},// ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/pageOne.html"),
      filename: "pageOne.html".chunks: ["pageOne"],}).new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/pageTwo.html"),
      filename: "pageTwo.html".chunks: ["pageTwo"],}).new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/pageThree.html"),
      filename: "pageThree.html".chunks: ["pageThree"],}),]};Copy the code

glob

When pages are added or deleted in our multi-page application, we need to manually modify the entry/HTml-webpack-plugin configuration in webpack. This is obviously not in line with the thinking of the program, but is there a more liberating way?

Glob makes use of the principle of file matching and matches files according to a certain pattern. Then we dynamically obtain entry and set the number of HTML-webpack-plugin according to the matched files.

The preparatory work

Before we start the configuration, we need to standardize our file storage rules. We can agree to put the entry file in the first level folder named index.js under SRC:

Dynamically generated

Install the glob:

npm i glob -D
Copy the code

Next, configure dynamic entry generation and htML-webpack-plugin:

// webapck.config.js
const path = require("path");
const glob = require("glob");

const setMPA = () = > {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFiles = glob.sync(path.resolve(__dirname, "src/*/index.js"));
  entryFiles.map((file) = > {
    const match = file.match(/\/src\/(.*)\/index.js/);
    const pageName = match && match[1];
    entry[pageName] = file;
    htmlWebpackPlugins.push(
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`.// Output the file name
        chunks: [pageName],
      })
    );
  });
  return { entry, htmlWebpackPlugins };
};

const { entry, htmlWebpackPlugins } = setMPA();

module.exports = {
  entry,
  plugins: [
    // .... htmlWebpackPlugins, ],// ...
};
Copy the code

packaging

After running the NPM run build, you should see the following packing effects:

Webpack series

  • preface
  • Extremely brief introduction
  • The core concept
  • Parse the file
  • File listening and hot update
  • File fingerprint Policy
  • Code compression
  • CSS enhancement: Autoprefixer
  • Multi-page Application Packaging Solution (MPA)