Webpack 4 構建大型項目實踐 / 處理 html

時間 2019-12-10

原文原文鏈接

上一節我有提到 Webpack 只能處理 Javascript 文件，這顯然不能知足用戶的平常使用需求，因此 Webpack 提供了 loader 和 plugins 兩個配置選項，用於擴展 Webpack 的處理類型。本節要講的 HtmlWebpackPlugin 就是專門用來處理和生成 html 文件的插件。javascript

因爲 Webpack 中文網 plugins 和 loaders 文檔部份內容更新滯後，使用中若是有疑惑，請點擊文檔右上角的「查閱原文」查看英文文檔。html

安裝

把 HtmlWebpackPlugin 安裝到項目，本小節項目基於上一節的示例項目進行擴展。前端

yarn add html-webpack-plugin -D
複製代碼

HtmlWebpackPlugin 只是用於 Webpack 打包而不是項目運行所需依賴，因此將其放到 package.json 的 devDependencies 項中，表示開發依賴。vue

基本使用

HtmlWebpackPlugin 使用有一個前置條件，就是當前項目已經安裝有 webpack 依賴，你能夠在 node_modules/html-webpack-plugin/package.json 中的 peerDependencies 項看到。java

若是不能在 node_modules/ 目錄下找到 webpack ，打包會報錯 Cannot find module 'webpack/lib/node/NodeTemplatePlugin'node

在項目中安裝 Webpackreact
```
yarn add webpack -D
複製代碼
```
由於你已經在全局安裝過 Webpack，你也可使用 npm link webpack 把全局 Webpack 依賴連接到這個示例項目。但並不推薦這樣作，由於 link 並不會把依賴加入到項目的 package.json 中，因此當你把配置給別人使用時，別人仍然會報錯。webpack

在 webpack.config.js 中加入 HtmlWebpackPlugin 的基本配置web

webpack.config.jsnpm

const path = require('path')
// +++
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src.js',
  output: {
    filename: 'dist.js',
    // modified
    path: path.resolve(__dirname, './dist')
  },
  // +++
  plugins:[
    new HtmlWebpackPlugin()
  ]
}
複製代碼

打包
```
webpack
複製代碼
```
能夠看到在生成的 dist/ 目錄下生成了兩個文件: dist.js 和 index.html，dist.js 內容同上一節，index.html 就是 HtmlWebpackPlugin 生成的，咱們能夠在瀏覽器中打開並查看控制檯 counter 函數的輸出。

index.html
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="dist.js"></script></body>
</html>
複製代碼
```

經常使用配置

本小節將經過 HtmlWebpackPlugin 的配置解釋，爲何上方生成了這樣一個 html 文件。

filename 生成 html 文件的文件名，默認值 index.html

上文生成 index.html 的緣由，你能夠這樣修改它：
```
new HtmlWebpackPlugin({
  filename: 'app.html'
})
複製代碼
```
title 生成 html 文件的 title 標籤內容，默認值 Webpack App

index.html 中 <title>Webpack App</title> 的緣由，你能夠這樣修改它：
```
new HtmlWebpackPlugin({
  title: 'my app'
})
複製代碼
```
chunks 生成 html 文件的引入，默認爲全部非懶加載生成文件

index.html 中 <script type="text/javascript" src="dist.js"></script> 的緣由，你能夠這樣修改它：
```
new HtmlWebpackPlugin({
  chunks: [] // 不加載任何生成文件
})
複製代碼
```
template 生成 html 基於的模板

有時候咱們但願在項目根目錄存寫一個 index.html ，讓一些靜態引用變得更方便，這個時候就須要用到 template 配置項，最終生成的 html 文件會合並 template 中的引入和其餘配置 / 插件生成的引入。
```
const path = require('path')
new HtmlWebpackPlugin({
  template: path.resolve(__dirname, 'index.html')
})
複製代碼
```
chunksSortMode 控制生成 html 文件資源引入順序，默認值 auto

none | auto | dependency | manual | {Function}

通常來講，都是使用默認值。但部分 webpack 3x 項目升級 webpack 4x 時會出現循環依賴報錯，實際不會影響到項目運行，而排查起來十分惱火，故可能在某些特定狀況下，你須要把它設置爲 none。固然這絕對不是建議，只是可能須要。

minify 生成 html 壓縮相關配置，mode: production 時爲 true 不然爲 false

但其餘固然你還能夠進行更詳細的配置：

new HtmlWebpackPlugin({
  minify: {
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true
  }
})
複製代碼