1.webpack小插件應(yīng)用

• 1. cleanWebpack

webpack在打包時(shí)，會(huì)查詢(xún)當(dāng)前根目錄下是否有dist(默認(rèn))文件夾，如果有，就將打包后的文件放入dist目錄下，如果沒(méi)有，那么會(huì)生成一個(gè)新的dist目錄，并且將打包的結(jié)果插入，如果配置的出口文件帶有hash，也就是打包后的文件名會(huì)發(fā)生變化的情況下，dist目錄會(huì)越來(lái)越大。clean-webpack-plugin這個(gè)插件就是為了解決此類(lèi)問(wèn)題的，它會(huì)清空dist目錄，或者刪除dist文件夾，并且重新生成，保證dist總是只有最新的代碼。這個(gè)插件暴露出了多個(gè)對(duì)象，此處我們只說(shuō)其“CleanWebpackPlugin”屬性。代碼如下：

//首先安裝： yarn add（或者npm install）clean-webpack-plugin -D
//用法： 
let { CleanWebpackPlugin } = require("clean-webpack-plugin");
new CleanWebpackPlugin();
//或者
let cleanWebpack = require("clean-webpack-plugin");
new cleanWebpack.CleanWebpackPlugin()

• 2.copyWebpackPlugin

當(dāng)我們有一些文件必須也放到打包后的文件夾（默認(rèn)dist），但它又與入口entry沒(méi)有任何直接或者間接的依賴(lài)關(guān)系。那么我們可以使用“copy-webpack-plugin”插件來(lái)達(dá)到目的

// 安裝  yarn add copy-webpack-plugin -D
let CopyWebpackPlugin = require("copy-webpack-plugin");
plugins: [
    .....
    new CopyWebpackPlugin([
      // 要拷貝的文件
      { from: "./public/a.txt", to: "./" } //"to"字段這里需要注意下，它已經(jīng)定位到了dist目錄下，因此不需要寫(xiě)成"./dist"，否則，會(huì)在dist下再生成一個(gè)dist目錄，將a.txt放在它里邊
    ])
  ]

• 3.bannerPlugin(內(nèi)置插件----用于生成版權(quán)聲明)

由于bannerPlugin是內(nèi)置插件，因此需要先引入webpack，應(yīng)用方式如下

plugins: [
    ...
    new webpack.BannerPlugin('make 2019 by lc')
  ]

打包后的js會(huì)帶上上邊括號(hào)內(nèi)的內(nèi)容

005255.png