1. 寫在前面

在前面的博客中我們說過，webpack之所以有這么強(qiáng)大的功能，是因為它借助了很多 loader 和 插件 的幫助。在之前webpack配置中，我們已經(jīng)介紹了很多 loader 和 插件 ，在這里再介紹三種小插件，可以幫助我們更好地使用webpack構(gòu)建項目。

這三款插件分別是：CleanWebpackPlugin、CopyWebpackPlugin、BannerPlugin(webpack內(nèi)置插件)。下面一一對這些插件進(jìn)行介紹。

2. CleanWebpackPlugin

該插件的作用是：每次進(jìn)行 build 的時候，將之前的dist目錄下的代碼清除，然后再打包生成新的代碼文件。

當(dāng)我們在使用 build 命令進(jìn)行打包編譯項目的時候，webpack會根據(jù)配置信息，將打包編譯好的項目輸出到一個文件夾中(默認(rèn)文件夾是dist) 。在項目的開發(fā)過程中，我們肯定會多次執(zhí)行 build 命令，這個時候我們希望每次執(zhí)行 build 命令的時候，都可以將之前打包生成的代碼文件刪除，然后生成最新的代碼文件。

但是實際情況卻是之前的代碼不會刪除，比如：第一次打包編譯項目，生成了a.js文件，第二次打包編譯項目，生成了b.js文件。這個時候，a.js文件使用不到的，但該文件還是會存在dist文件夾下，這是我們不愿意看到的。

這里我們可以借助CleanWebpackPlugin插件進(jìn)行刪除之前的文件，首先執(zhí)行以下命令進(jìn)行安裝插件：

yarn add clean-webpack-plugin -D

安裝完成之后，在 webpack.config.js 文件中書寫以下代碼進(jìn)行配置：

let CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    /* 節(jié)省篇幅，其余配置已省略 */
    plugins: [
        new CleanWebpackPlugin([
            './dist'    // 指定你要清楚文件的目錄，可以傳入多個目錄參數(shù)
        ])
    ]
    
}

這里將其他的配置規(guī)則省略了，如果你想看其他的配置規(guī)則，可以查看我的 GitHub倉庫 - webpack-learning ,或者通過本文末尾的鏈接，跳轉(zhuǎn)到我之前的博客中進(jìn)行查看。

3.CopyWebpackPlugin

該插件的作用是：在每次進(jìn)行 build 的時候，將某些靜態(tài)資源復(fù)制到特定文件夾下。

比如將一些特定的Excel文件，拷貝到dist 目錄下，可以借助這款插件的幫助。使用這款插件，首先要執(zhí)行以下命令進(jìn)行安裝：

yarn add copy-webpack-plugin -D

配置代碼也是非常簡單，直接在 webpack.config.js 文件中書寫以下代碼：

let CopyWebpackPlugin = require('copy-webpack-plugin')

modules.export = {
    /* 節(jié)省篇幅，其余配置已省略 */
    plugins: [
        new CopyWebpackPlugin([
            // 參數(shù)是數(shù)組，可以對多個位置的文件進(jìn)行copy 
            { from: './doc', to: './dist' }
        ])
    ]
}

這里需要說明的是，這里的 from 和 to 屬性根據(jù)自己的實際情況進(jìn)行配置。

4. BannerPlugin(webpack內(nèi)置插件)

這是一款webpack的內(nèi)置插件，作用是：代碼版權(quán)聲明插件，在編譯好的 .js 文件的頭部插入我們指定的版權(quán)聲明文字，起到版權(quán)聲明的作用。

既然是webpack內(nèi)置插件，所以我們不用額外進(jìn)行安裝，可以直接進(jìn)行在 webpack.config.js 文件中進(jìn)行配置，示例代碼如下：

let webpack = require('wepack');

modules.export = {
    plugins: [
        // 參數(shù)是你要一個字符串，值是你要添加的版權(quán)聲明信息
        new webpack.BannerPlugin('Made by Allen Feng')
    ]
}

配置完成之后，再次進(jìn)行打包編譯項目，就可以在生成的 .js 文件中看到我們的版權(quán)信息：

/*! Made by Allen Feng */!function(e){var n={};function t(r){if(n[r])return n[r]......

5. 寫在最后

以上便是這三款小插件，可以幫助我們更好的使用webpack構(gòu)建項目。