Webpack4 學習筆記 - 04：使用 Plugins 插件

時間 2019-11-10

標籤 webpack4 webpack 學習筆記使用 plugins 插件简体版

原文原文鏈接

什麼是 `Plugins` ？

plugins 顧名思義，就是插件，它能夠在 webpack 運行到某個時刻的時候，來作一些事情。
下面就舉一些使用 plugins 的例子。css

使用 `HtmlWebpackPlugin`

HtmlWebpackPlugin 作什麼用的呢？文檔解析：該插件將爲你生成一個 HTML5 文件，其中包括使用 script 標籤的 body 中的全部 webpack 包。html

是否是這樣呢，下面就來演示一下吧，首先把暫時沒用的文件如 .css 和 index.html 都刪掉，目錄結構以下：webpack

index.js 文件內容以下：web

var root = document.getElementById('root');
var wp = document.createElement('div');
wp.innerText = 'Hello, Webpack';

root.append(wp);

安裝 HtmlWebpackPlugin 插件：npm

npm install html-webpack-plugin --save-dev

想要使用這個插件，就要在 webpack.config.js 中去引入它並配置：app

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入plugin

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin() // 實例化plugin
    ],
    mode: 'development'
}

配置完成後，運行打包命令，查看結果，發現果真在 dist 目錄下，自動建立好了一個 .html 文件：ui

而且自動把打包好的 js 文件給引入了進來：spa

到此，打包成功了，也證實了 HtmlWebpackPlugin 會在打包結束後，自動生成一個 html 文件，並把打包生成的 js 文件自動引入到這個 html 文件中去。插件

打包成功是成功了，可是運行 index.html 看一下，會發現頁面空白，什麼也沒有。這是由於寫在 index.js 中的代碼3d

var root = document.getElementById('root');

須要一個 id = root 的 div，但生成的文件中，並無這個 div，怎麼辦呢？查看文檔，發現 HtmlWebpackPlugin 能夠配置一個模板文件，而且會使用這個模板文件來生成 html 文件。

在 src 目錄下新建 index.html 模板文件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

配置這個模板文件：

plugins: [new HtmlWebpackPlugin({template: 'src/index.html'})]

再運行打包命令，查看結果，發現生成的 html 文件已經把

<div id="root"></div>

添加上去了，說明模板文件的配置起了做用。打開頁面會看到正確輸出了 Hello, Webpack 字樣，到此打包正確完成了。

使用 `CleanWebpackPlugin`

修改一下 webpack.config.js 中的 output 配置，把輸出的文件名從 bundle.js 改成 main.js，而後運行打包，查看一下結果：

這時候會發現，雖然 main.js 生成了，也被引入到了 index.html 文件中，可是原來的 bundle.js 還遺留了下來，須要去手動刪除。若是項目較大，文件較多，改動較頻繁，這樣的遺留文件會愈來愈多，手動一個個刪除確定是費事費力的，這時就須要 CleanWebpackPlugin 來幫忙自動清理了。

安裝 CleanWebpackPlugin：

npm install clean-webpack-plugin -D

和HtmlWebpackPlugin同樣，修改 webpack.config.js 的配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin() // 最新版本會根據配置的output.path清空目錄下的內容，可是不刪除目錄

    ],
    mode: 'development'
}

運行打包，會看到 dist 目錄下的 bundle.js 文件已將沒有了。查看打包的過程：