首页手记 5分钟掌握 webpack 多页应用配置

5分钟掌握 webpack 多页应用配置

标签：

前端工具

基本思路

webpack 多页应用配置的基本思路是采用多入口配置，然后多次调用 html-webpack-plugin 来生成 html 文件。

假设项目的目录结构为：

src
 |-pages
     |-home
         |-home.html
         |-home.js
     |-about
         |-about.html
         |-about.js

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'] // 默认会将打包出的所有 js 插入 html。故需指明页面需要的模块
    }),
    new HTMLWebpackPlugin({
      template: 'src/pages/about/about.html',
      filename: 'about.html',
      chunks: ['about']
    })
  ]
}

运行 webpack，最终将生成：

dist
 |-js
   |-home.js
   |-about.js
 |-home.html
 |-about.html

可以发现，每个 html 中已经以 script 标签的形式插入了对应的 js 文件。

使用 glob 遍历文件

由于每增加一个页面，都需要手动的添加 entry 和 plugin，显得很费事儿。因此我们引入 glob 来遍历读取 html 文件，然后动态配置 entry 与 plugin。当然，需要事先 npm install glob

const glob = require('glob')
glob.sync('src/pages/**/*.html')
// 返回符合 pattern 参数的文件路径数组
// ['src/pages/about/about.html', 'src/pages/home/home.html']

于是 entry 和 plugin 都可以自动生成：

const HTMLReg = //([w-]+)(?=.html)/
const JSReg = //([w-]+)(?=.js)/

const html = glob.sync('src/pages/**/*.html').map(path => {
  let name = path.match(HTMLReg)[1] // 从路径中提取出文件名
  return 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
  return prev
}, {})

module.exports = {
  entry: entries，
  output: {
    filename: 'js/[name].[chunkhash:8].js',
    path: __dirname + '/dist'
  },
  plugins: html
}

提取公共 js

提取公共 js 使用 CommonsChunkPlugin 即可

const html = glob.sync('src/pages/**/*.html').map(path => {
  let name = path.match(HTMLReg)[1] // 从路径中提取出文件名
  return new HTMLWebpackPlugin({
    template: path,
    filename: name + '.html',
    chunks: [name, 'vendor'] // 加上公共模块
  })
})
// ...
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor'
  })
].concat(html)

提取公共的 html 片段

HTMLWebpackPlugin 本身就支持使用 ejs 的语法来插入 html 片段。我们新增加一个公共模板的目录：

src
 |-pages
 |-template
      |-header.html

header.html 大概长这样：

<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">

在 home.html 中引入 header.html：

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

webpack 中除了 js 以外的资源都需要相应 loader 处理，require('html-loader!../../template/header.html') 表示采用 html-loader 处理 header.html（需事先 npm install html-loader）

注意不需要在 webpack.config.js 的 module 中配置 html-loader，否则将引入失败。

图片资源也可以采用上述方式引入，并且不需要指明 loader：

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

完整参考

const webpack = require('webpack')
const glob = require('glob')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const path = require('path')

const HTMLReg = /\/([\w-]+)(?=\.html)/
const JSReg = /\/([\w-]+)(?=\.js)/

const html = glob.sync('src/pages/**/*.html').map(path => {
  let name = path.match(HTMLReg)[1]
  return new HTMLWebpackPlugin({
    template: path,
    filename: name + '/' + name + '.html',
    chunks: [name, 'vendor', 'manifest']
  })
})

const entries = glob.sync('src/pages/**/*.js').reduce((prev, next) => {
  let name = next.match(JSReg)[1]
  prev[name] = './' + next
  return prev
}, {})

module.exports = {
  context: path.resolve(__dirname, './'),
  entry: entries,
  output: {
    filename: '[name]/[name].[chunkhash:8].js',
    path: __dirname + '/dist',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: {
            loader: 'css-loader'
          }
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [{
              loader: "css-loader"
          }, {
              loader: "sass-loader"
          }],
          // use style-loader in development
          fallback: "style-loader"
        })
      },
      {
        test: /\.(png|jpe?g)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 1024,
            name: 'img/[name].[hash:8].[ext]'
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader!',
              fallback: 'vue-style-loader'
            }),
            scss: ExtractTextPlugin.extract({
              use: 'css-loader!resolve-url-loader!sass-loader?sourceMap',
              fallback: 'vue-style-loader'
            }),
            sass: ExtractTextPlugin.extract({
              use: 'css-loader!resolve-url-loader!sass-loader?indentedSyntax',
              fallback: 'vue-style-loader'
            })
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10,
          name: 'fonts/[name].[hash:8].[ext]'
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new ExtractTextPlugin({
      filename: '[name]/[name].[contenthash:8].css',
      allChunks: true // `allChunks` is needed to extract from extracted chunks as well
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      deepChildren: true
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      filename: "vendor/manifest.js",
      minChunks: Infinity
    }),
  ].concat(html)
}