The basic idea

The basic idea of webpack multi-page application configuration is to use multi-entry configuration, and then call htML-webpack-plugin several times to generate HTML files.

Assume that the directory structure of the project is:

src
 |-pages
     |-home
         |-home.html
         |-home.js
     |-about
         |-about.html
         |-about.js
Copy the code

Webpack. Config. Js:

const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    home: 'src/pages/home/home.js',
    about: 'src/pages/about/about.js',}, output: {filename:'js/[name].[chunkhash:8].js',
    path: __dirname + '/dist'
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: 'src/pages/home/home.html',
      filename: 'home.html',
      chunks: ['home'] // By default, all packed JS is inserted into HTML. }), new HTMLWebpackPlugin({template:'src/pages/about/about.html',
      filename: 'about.html',
      chunks: ['about']]}})Copy the code

Running WebPack will eventually produce:

dist
 |-js
   |-home.js
   |-about.js
 |-home.html
 |-about.html
Copy the code

You can see that a corresponding JS file has been inserted into each HTML as a script tag.

Use glob to traverse the file

Since each new page needs to be manually added with entry and plugin, it can be very time-consuming. So we introduced glob to iterate through the HTML file and then dynamically configure entry and plugin. Of course, NPM install Glob is required first

const glob = require('glob')
glob.sync('src/pages/**/*.html'// Return an array of file paths that match the pattern parameter // ['src/pages/about/about.html'.'src/pages/home/home.html']
Copy the code

Entry and plugin can then be generated automatically:

const HTMLReg = //([w-]+)(? =.html)/ const JSReg = //([w-]+)(? =.js)/ const html = glob.sync('src/pages/**/*.html').map(path => {
  letName = path.match(HTMLReg)[1] // Extract file name from pathreturn new HTMLWebpackPlugin({
    template: path,
    filename: name + '.html',
    chunks: [name]
  })
})

const entries = glob.sync('src/pages/**/*.js').reduce((prev, next) => {
  let name = next.match(JSReg)[1]
  prev[name] = '/' + next
  returnExports = {entry: entries, output: {filename: 0}, {}) module. Exports = {entry: entries, output: {filename: 0}'js/[name].[chunkhash:8].js',
    path: __dirname + '/dist'
  },
  plugins: html
}
Copy the code

Extracting public JS

Extract common JS using CommonsChunkPlugin

const html = glob.sync('src/pages/**/*.html').map(path => {
  letName = path.match(HTMLReg)[1] // Extract file name from pathreturn new HTMLWebpackPlugin({
    template: path,
    filename: name + '.html',
    chunks: [name, 'vendor'] // Add public module})}) //... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name:'vendor'
  })
].concat(html)
Copy the code

Extract the public HTML fragment

The HTMLWebpackPlugin itself supports inserting HTML fragments using EJS syntax. We added a new directory for public templates:

src
 |-pages
 |-template
      |-header.html
Copy the code

Header. HTML looks something like this:

<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<link rel="dns-prefetch" href="//css.alikunlun.com">
<link rel="dns-prefetch" href="//js.alikunlun.com">
<link rel="dns-prefetch" href="//img.alikunlun.com">
<meta name="keywords" content="keywords">
<meta name="description" content="description">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="applicable-device" content="mobile">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-cache">
Copy the code

Add header. HTML to home.html:

<! DOCTYPE html> <html lang="en">
<head>
  <%= require('html-loader! . /.. /template/header.html') %>
  <title>home</title>
</head>
Copy the code

Webpack resources other than JS need to be handled by the corresponding loader, require(‘html-loader! . /.. /template/header. HTML ‘) indicates that html-loader is used to process header. HTML.

Note there is no need to configure html-loader in the module of webpack.config.js, otherwise it will fail to be imported.

Image resources can also be imported in the above manner without specifying the loader:

<img src="<%= require('./name.png') %>">Copy the code

Source: https://www.imooc.com/article/23643#