5分鐘掌握 webpack 多頁應用配置

靈狐發表於2018-11-22
Web

基本思路

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') %>">複製程式碼

來源：https://www.imooc.com/article/23643#


相關文章