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

# 5. 使用第一個 webpack 插件 html-webpack-plugin 之前我們已經可以轉化 js 文件了，但是一般來說，我們放在網頁上的是 html 頁面。現在我們就把 html 和 js 還有 webpack 結合來玩玩。很簡單，只要把 js 文件引入到 html 中就好。 ## 1. 創建 index.html 首先在 `dist` 目錄下創建 `index.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 托管起來，就可以用了。前端的項目不就是這樣處理的嗎？但是，我一般不會這么做，我會用更好的方式來處理這個問題。為什么呢？因為 `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](https://github.com/jantimon/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` 文件，打開來看下。 ``` <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` 文件，是不是變化了。 ``` <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` 文件，內容如下： ``` <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> </body> </html> ``` 我們再來看看新生成的 `dist/index.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` 文件的內容的沒用空格去掉，減少空間。效果如下： ![](https://box.kancloud.cn/b555f89863776bc2d608312b3c06dbc0_2336x184.png) `hash: true` 為了更好的 cache，可以在文件名后加個 hash。（這點不明白的先跳過）效果如下： ![](https://box.kancloud.cn/b4065ca28d8bd25352c43722bb4476d3_915x110.png) 最后的 `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, })] }; ``` `html-webpack-plugin` 肯定還有更多的用法和選項，這個只能根據需要慢慢探究了。先說這么多。