webpack 4.0 學習日志(三)——webpack 插件 html-webpack-plugin

1. 創建 index.html

首先在 dist 目錄下創建 index.html 文件,其內容如下:

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

這樣,你在服務器上把這個 index.htmlapp.bundle.js 放到網站根目錄中,用 nginx 托管起來,就可以用了。

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

但是,我一般不會這么做,我會用更好的方式來處理這個問題。

為什么呢?

因為 index.html 文件太死了,連 js 文件都寫死了,有時候引用的 js 文件是動態變化的呢?

打個比方,類似下面這種例子:

<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 build 命令,你會發現在 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-plugintemplate 功能。

webpack.config.js 更改如下:

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

module.exports = {
  entry: './src/index.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/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })]
};

html-webpack-plugin 肯定還有更多的用法和選項,這個只能根據需要慢慢探究了。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • GitChat技術雜談 前言 本文較長,為了節省你的閱讀時間,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,710評論 7 110
  • 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,222評論 0 21
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,495評論 2 71
  • /*生成環境配置文件:不需要一些dev-tools,dev-server和jshint校驗等。和開發有關的東西刪掉...
    David_Sam閱讀 1,082評論 0 1
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,314評論 4 31