webpack 3 零基礎入門教程 #5 - 使用第一個 webpack 插件 html-webpack-plugin

時間 2019-12-01

標籤 webpack 零基礎入門教程使用第一個插件 html plugin 欄目 HTML 简体版

原文原文鏈接

以前咱們已經能夠轉化 js 文件了，可是通常來講，咱們放在網頁上的是 html 頁面。javascript

如今咱們就把 html 和 js 還有 webpack 結合來玩玩。html

很簡單，只要把 js 文件引入到 html 中就好。前端

1. 建立 index.html

首先在 dist 目錄下建立 index.html 文件，其內容以下：java

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Project</title>
</head>
<body>
  <script src="app.bundle.js"></script>
</body>
</html>
複製代碼

這樣，你在服務器上把這個 index.html 和 app.bundle.js 放到網站根目錄中，用 nginx 託管起來，就能夠用了。webpack

前端的項目不就是這樣處理的嗎？nginx

可是，我通常不會這麼作，我會用更好的方式來處理這個問題。git

爲何呢？github

由於 index.html 文件太死了，連 js 文件都寫死了，有時候引用的 js 文件是動態變化的呢？web

打個比方，相似下面這種例子：npm

<script src="app.bundle1.js"></script>
<script src="app.bundle2.js"></script>
<script src="app.bundle3.js"></script>
複製代碼

並且還不肯定有多少個。

還有一種狀況，有時候爲了更好的 cache 處理，文件名還帶着 hash，例以下面這樣：

main.9046fe2bf8166cbe16d7.js

這個 hash 是文件的 md5 值，隨着文件的內容而變化，你總不能每變化一次，就改一下 index.html 文件吧？

效率過低！

下面咱們要使用一個 webpack 的插件 html-webpack-plugin 來更好的處理這個問題。

2. html-webpack-plugin

webpack 吸引人的地方就是由於它有太多的插件，有時候一些需求，一個插件就搞定。

這麼多插件，咱們不可能全都學，全都用，要用也是找最好的，最經常使用的來玩，並且學了一個，其餘的也差很少，掌握方法就好。

學習插件的第一步，是進入其主頁，先把它的 readme 文檔看看，至少知道它是幹什麼的，能解決什麼問題，最後知道如何用就好了。

2.1 安裝

先來安裝，一條命令就好。

$ npm install html-webpack-plugin --save-dev
複製代碼

安裝成功後，package.json 這個文件會多出一行 "html-webpack-plugin": "^2.30.1",，以下所示：

{
  "name": "hello-wepback",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.8.1"
  }
}
複製代碼

2.2 使用

如今咱們把以前的 dist/index.html 先刪除掉，咱們要用 html-webpack-plugin 這個插件來自動生成它。

把 webpack.config.js 文件改一下，以下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin');

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

最後，運行一下上文所說的 npm run dev 命令，你會發如今 dist 目錄生成了 index.html 文件，打開來看下。

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

連標題 <title>Webpack App</title> 都自動生成了，若是這是固定的話，就不太靈活，可是 html-webpack-plugin 有選項來處理這個問題。

3. 更好的使用 html-webpack-plugin

要改變 title 很簡單，上文提到 HtmlWebpackPlugin 這個方法能夠傳入不少參數的，下面這樣就能夠解決這個問題。

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    title: "hello world"
  })]
};
複製代碼

再去看看新生成的 index.html 文件，是否是變化了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hello world</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script></body>
</html>
複製代碼

只是改變了一點點東西，其實也沒多大用處，有時候咱們要讓 index.html 根據咱們的意願來生成。就是說它的內容是咱們本身定的。

這個就不得不提到 html-webpack-plugin 的 template 功能。

把 webpack.config.js 更改以下：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
  })]
};
複製代碼

接着新建 src/index.html 文件，內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
</body>
</html>
複製代碼

咱們再來看看新生成的 dist/index.html 文件，內容以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script></body>
</html>
複製代碼

下面我再來介紹幾個參數，以及它的結果。

filename: 'index.html' 默認狀況下生成的 html 文件叫 index.html，但有時候你不想叫這個名字，能夠改。

minify: {
      collapseWhitespace: true,
    },
複製代碼

這個能夠把生成的 index.html 文件的內容的沒用空格去掉，減小空間。

效果以下：

hash: true 爲了更好的 cache，能夠在文件名後加個 hash。（這點不明白的先跳過）

效果以下：

最後的 webpack.config.js 內容大約是下面這樣的：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })]
};
複製代碼