摘要：去做想做的事，去愛(ài)值得的人去成為自己喜歡的模樣，去讓自己發(fā)光渾身充滿力量，充實(shí)的日子最美好各位早安，這里是平頭哥聯(lián)盟，我是首席填坑官蘇南，用心分享一起成長(zhǎng)做有溫度的攻城獅。

　　繼上一次webpack的基礎(chǔ)配置分享之后，本次將分享一些工作中項(xiàng)目常用的配置插件、也會(huì)包含一些自己了解過(guò)覺(jué)得不錯(cuò)的插件，如有分析不到位的，歡迎糾錯(cuò)，嗯，這些東西文檔都有，大佬可繞過(guò)。

　　Wepack4之后廢棄了很多的插件，這里只會(huì)講解webpack4還支持的（包含4之前插件），已經(jīng)廢棄的將不再闡述。

　　上一次的分享之后，有部分掘金網(wǎng)友留言質(zhì)疑：騙小白的贊、是否原創(chuàng)、是否是抄別人等等，當(dāng)然也有很多的網(wǎng)友支持和鼓勵(lì)，不管褒貶，蘇南都非常的感謝，是你們讓我認(rèn)識(shí)到自己的不足與優(yōu)劣。

　　大家的留言，讓我想起了自己剛?cè)腴T前端初期的心酸，基本靠自己自學(xué)，沒(méi)有人帶，遇到問(wèn)題像無(wú)頭的蒼蠅，到處亂撞網(wǎng)上一頓搜索，百度不曾欺我，在點(diǎn)了一個(gè)又一個(gè)的廣告之后，翻過(guò)十頁(yè)八頁(yè)之后終于找到了問(wèn)題的解決方案。

　　執(zhí)著于對(duì)前端的熱愛(ài)，常常一個(gè)問(wèn)題卡到深夜，初入前端的我曾一度感嘆在編輯器寫一些東西，在網(wǎng)頁(yè)上就能跑，甚至感嘆 js 寫上一個(gè) alert hello world，瀏覽器就會(huì)自動(dòng)彈出一個(gè)窗口，感覺(jué)全世界都在向你招手，當(dāng)時(shí)的興奮是難以形容的，甚至幻想著未來(lái)有一天，可能有千萬(wàn)、億萬(wàn)的用戶，在用你寫的東西。

　　這幾天一直在想，這篇插件的總結(jié)還是否要繼續(xù)寫下去？從寫博客到今天，將近兩個(gè)月吧，也算是一個(gè)新人，技術(shù)方面雖說(shuō)工作了幾年，但也不敢說(shuō)多牛B，寫博客的初衷是為了對(duì)自己工作中遇到的問(wèn)題/心得等做一個(gè)總結(jié)，俗話說(shuō)：好記性不如爛筆頭；同時(shí)也希望能把自己遇到的問(wèn)題、坑點(diǎn)分享給他人，讓遇到同樣問(wèn)題的基友們能少走那么一點(diǎn)點(diǎn)彎路。

　　終于最后在想了很久之后明白，人無(wú)完人，百人百性、千人千面，不管你做總會(huì)有不同的聲音，同樣不管你分享什么，總會(huì)有人需要。所以走自己的路，讓別人打車吧，堅(jiān)持自己所想 努力成為自己想成為的樣子，就是對(duì)自己最大的肯定 ———— 至曾經(jīng)初入前端的我們。

去做想做的事，去愛(ài)值得的人；

去成為自己喜歡的模樣，

去讓自己發(fā)光！渾身充滿力量，

充實(shí)的日子最美好！

各位早安，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官?蘇南，用心分享 一起成長(zhǎng) 做有溫度的攻城獅。
公眾號(hào)：honeyBadger8，群：912594095

css-提取，看名字就懂提取css用的。

在這之前我們可能會(huì)使用extract-text-webpack-plugin比較多一些，兩者相比它有什么優(yōu)勢(shì)呢？

extract-text-webpack-plugin 它對(duì)css的提取，最終是根據(jù)你創(chuàng)建的實(shí)例、或者配置多個(gè)入口 chunk來(lái)的，

比如你配置了一個(gè)入口文件，最終所有的css都會(huì)提取在一個(gè)樣式文件里，

如果你創(chuàng)建了多個(gè)extract-text-webpack-plugin實(shí)例，則會(huì)生成多個(gè)css的文件，

而mini-css-extract-plugin，它默認(rèn)就會(huì)對(duì)你的樣式進(jìn)行模塊化拆分，嗯，有點(diǎn)跟output里的配置一個(gè)意思，異步按需加載，不再僅僅是js的特權(quán);

//extract-text-webpack-plugin 編譯打包
config.module.rules.push({
  test: /.(scss|css)$/,
  use: ExtractTextPlugin.extract({
    use: [
      "css-loader",
      { //首席填坑官?蘇南的專欄 交流：912594095、公眾號(hào)：honeyBadger8
        loader: "postcss-loader",
        options: {
          plugins: [
            require("autoprefixer")({ //添加前綴
              browsers: CSS_BROWSERS,
            }),
          ],
          minimize: true
        },
      },
      "sass-loader"
    ]
  })
})
config.plugins.push(new ExtractTextPlugin({
  filename: "css/[name].css",
  disable: false,
  allChunks: true,
}));


//mini-css-extract-plugin  編譯打包
config.module.rules.push({
  test: /.(scss|css)$/,//同時(shí)處理css/scss
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      "css-loader", //css處理器
      {
        loader: "postcss-loader",
        /*
            postcss 這個(gè)插件的作用在于，與已有的工具集成一起使用，很少有多帶帶使用的情況，
            通用我們用的最多的，是配合 autoprefixer 來(lái)添加各瀏覽器的前綴，以達(dá)到更好的兼容，
            再深入一些就是 cssnext 就是允許開(kāi)發(fā)者自定義屬性和變量 ：     color:var(--theme-color,#42b983);
        */
        options: {
          plugins: [
            require("autoprefixer")({ 
              browsers: CSS_BROWSERS,
            }),
          ],
        },
      },
      "sass-loader" //sass處理器 、甚至還可以再加一個(gè)less的處理器
    ]
})

config.plugins.push(new MiniCssExtractPlugin({
  filename: "css/[name].css", //這里配置跟output寫法一致
  chunkFilename: "css/[id][chunkhash:8].css",
}));
config.plugins.push(new OptimizeCssAssetsPlugin({})); //壓縮文件

上面的示例里已經(jīng)用到了，它的作用在于壓縮css文件，

assetNameRegExp：默認(rèn)是全部的css都會(huì)壓縮，該字段可以進(jìn)行指定某些要處理的文件，

cssProcessor：指定一個(gè)優(yōu)化css的處理器，默認(rèn)cssnano，

cssProcessorPluginOptions：cssProcessor后面可以跟一個(gè)process方法，會(huì)返回一個(gè)promise對(duì)象，而cssProcessorPluginOptions就是一個(gè)options參數(shù)選項(xiàng)！

canPrint：布爾，是否要將編譯的消息顯示在控制臺(tái)，沒(méi)發(fā)現(xiàn)有什么用！

坑點(diǎn) ：建議使用高版本的包，之前低版本有遇到樣式丟失把各瀏覽器前綴干掉的問(wèn)題，

new OptimizeCssAssetsPlugin({
  assetNameRegExp: /.optimize.css$/g,
  cssProcessor: require("cssnano"),
  cssProcessorPluginOptions: {
    preset: ["default", { discardComments: { removeAll: true } }],
    //autoprefixer: { browsers: CSS_BROWSERS }, 也是可以指定前綴的
  },
  canPrint: true
})

它們跟上一篇的optimization配置下的的splitChunks、runtimeChunk基本是一致的，；

SplitChunksPlugin、RuntimeChunkPlugin，其實(shí)就是webpack4之前CommonsChunkPlugin的替代品，用于提取一些公共模塊；

chunks：要進(jìn)行處理的類型，它有三個(gè)值：all,async,initial

minSize：最少大小

maxSize：最大包的大小，超出生成新的包

minChunks：至少要引用N次的模塊，

maxAsyncRequests：最大的按需加載并行請(qǐng)求數(shù)量

maxInitialRequests：最大的初始化加載請(qǐng)求次數(shù)

new webpack.optimize.SplitChunksPlugin({
        chunks: "async", 
      minSize: 30000, 
      maxSize: 0, 
    minChunks: 1,  
      maxAsyncRequests: 1,
        maxInitialRequests:1, 
    name: true, //可以指定
    ……,

  }),
  new webpack.optimize.RuntimeChunkPlugin({
    name: "manifest",
    name: entrypoint => `runtimechunk~${entrypoint.name}` //動(dòng)態(tài)文件名
  })

熱更新替換，在不刷新重載頁(yè)面的情況下更換編輯修改后的代碼：

它只會(huì)更新改動(dòng)過(guò)的內(nèi)容，所以速度很快，幾乎在自己剛改完，切到瀏覽器窗口內(nèi)容就已經(jīng)更新完了；

使用 HotModuleReplacementPlugin插件后，它會(huì)暴露一個(gè)module.hot對(duì)象，它下面有很多的屬性：

accept：它有兩個(gè)參數(shù)，一個(gè)是授權(quán)模塊(可以直接是單個(gè)文件路徑、也可以是一個(gè)數(shù)組包含多個(gè)文件路徑)，第二個(gè)參數(shù)，是回調(diào)函數(shù)，即更新后要做的邏輯處理。

decline 有點(diǎn)黑名單的意思，就是忽略一些模塊，不更新它們，

status 當(dāng)前更新的狀態(tài)，idle、check、prepare、ready、dispose、apply、fail等；

一般只用到 accept 最多，下面有個(gè)示例；

new webpack.HotModuleReplacementPlugin()


//路由入口頁(yè)
……
if (module.hot) {
    module
        .hot
        .accept([
            "./pages/routes"
        ], (err) => {
            const NextRoute = require("./pages/routes")
            // 從DOM 中移除已經(jīng)掛載的 React 組件 然后重裝
            ReactDOM.unmountComponentAtNode(APP_DOM);
            ReactDOM.render(
                
                    
                , APP_DOM);
        });
}
……

這個(gè)插件相信大家都熟悉的不能再熟悉了,

把編譯后的文件（css/js）插入到入口文件中，可以只指定某些文件插入，可以對(duì)html進(jìn)行壓縮等

filename：輸出文件名；

template：模板文件，不局限于html后綴哦；

removeComments：移除HTML中的注釋；

collapseWhitespace：刪除空白符與換行符，整個(gè)文件會(huì)壓成一行；

inlineSource：插入到html的css、js文件都要內(nèi)聯(lián)，即不是以link、script的形式引入；

inject：是否能注入內(nèi)容到 輸出 的頁(yè)面去；

chunks：指定插入某些模塊；

hash：每次會(huì)在插入的文件后面加上hash ，用于處理緩存，如：；

其他：favicon、meta、title ……；

new HtmlWebPackPlugin({
  filename: path.resolve(__dirname, "../assets/index.html"), 
  template: path.resolve(__dirname,"../views/temp.html"),
  minify:{ //壓縮HTML文件　
　　removeComments:true, 
　　collapseWhitespace:true 
    },
  inlineSource:  ".(js|css)",
  inject: false,
    chunks: ["vendors", "index"], //首席填坑官?蘇南的專欄
    hash:true, 
    favicon、meta、title等都可以配置，頁(yè)面內(nèi)使用「<%= htmlWebpackPlugin.options.title %>」即可
    ……
})

js代碼壓縮,默認(rèn)會(huì)使用 optimization.minimizer，

cache: Boolean/String ,字符串即是緩存文件存放的路徑；

test：正則表達(dá)式、字符串、數(shù)組都可以，用于只匹配某些文件，如：/.js(?.*)?$/i;

parallel : 啟用多線程并行運(yùn)行來(lái)提高編譯速度，經(jīng)常編譯的時(shí)候聽(tīng)到電腦跑的呼呼響，可能就是它干的，哈哈～；

output.comments ： 刪除所有注釋，

compress.warnings ：插件在進(jìn)行刪除一些無(wú)用代碼的時(shí)候，不提示警告，

compress.drop_console：喜歡打console的同學(xué)，它能自動(dòng)幫你過(guò)濾掉，再也不用擔(dān)心線上還打印日志了；

等等還有一些如：定義壓縮的程度、提出多次出現(xiàn)但沒(méi)有變量的值的配置，想深入的同學(xué)可移步官方；

//默認(rèn)：
optimization:{
    minimizer:true
};

//自定義
minimizer: [
  new UglifyJsPlugin({
    cache: true,
    // cache: "assets", 
    parallel: true, //也可以指定 Number ,即最多并行運(yùn)行數(shù)量
    sourceMap: true,
    uglifyOptions: {
      output: {
        comments: false,
        …… //首席填坑官?蘇南的專欄，QQ:912594095
      },
      compress: {
          warnings: false,
          drop_console:true,
          …… 
        }
    },
  }),
],

這個(gè)插件，它的作用在于某些時(shí)候，我們需要對(duì)文件添加一些說(shuō)明，比如版本號(hào)，作者、日期等，

它就可以幫到，每次編譯，在頭部插件一些注釋；

它可以直接是一個(gè)字符串，也可以是一個(gè)options;

嗯，差點(diǎn)忘說(shuō)了，它是webpack自帶的一個(gè)插件，不用另外再安裝依賴，

//字符串：
new webpack.BannerPlugin("給文件添加一些信息，打包日期："+ new Date());

//自定義
plugins: [
  new webpack.BannerPlugin({
    {
          banner: " 
 @item:蘇南的項(xiàng)目 
 @author:suSouth 
 @date:"+new Date()+" 
 @description:蘇南的項(xiàng)目 
 @version:"+package.version+"  
", // 要輸出的注釋內(nèi)容
          test:string/正則/數(shù)組，//可用于匹配某些文件才輸出，
          entryOnly: boolean, // 即是否只在入口 模塊 文件中添加注釋；
          ……
        }
  })
],

在使用這個(gè)插件之前，我們需要先了解一下 preload、prefetch，從字面意思上講：預(yù)加載，

不難理解，就是提前加載資源(匹配其他頁(yè)面可能用到的資源進(jìn)行預(yù)先，從而達(dá)到無(wú)loading ，用戶無(wú)感知的跳轉(zhuǎn))，它的使用也非常的簡(jiǎn)單，在你要進(jìn)行預(yù)加載的資源上添加 rel="preload"標(biāo)簽即可；

示例：

而preload-webpack-plugin它的作用就是在編譯打包的時(shí)候，幫我們把以上的操作都做了，

編譯完成后，你可以（指定某些/全部）文件動(dòng)態(tài)插入到 HtmlWebPackPlugin 配置輸出的文件內(nèi)，

as： 表示你預(yù)加載的資源類型；可以有有先多：script、font、image、style、video等等，更多詳細(xì)請(qǐng)查看API，它還可以返回function；

include：要插入，進(jìn)行預(yù)加載的文件，它有：allChunks、initial、asyncChunks、數(shù)組等選項(xiàng)，數(shù)組即表示指定插入某些文件

fileBlacklist:即文件黑名單，可以指定某個(gè)文件，也可以使用正則來(lái)匹配；

//注意點(diǎn)1：請(qǐng)把配置一定寫在HtmlWebPackPlugin插件之后，否則會(huì)報(bào)`HtmlWebpackPlugin.getHooks is not a function`錯(cuò)誤，
//注意點(diǎn)2：webpack4之后，請(qǐng)使用最新版本 npm install --save-dev preload-webpack-plugin@next，

new PreloadWebpackPlugin({
  rel: "prefetch",
  as: "script",
  // as(entry) {
  //   if (/.css$/.test(entry)) return "style";
  //   return "script";//首席填坑官?蘇南的專欄，QQ:912594095
  // },
  include: "asyncChunks",
  // fileBlacklist: ["index.css"]
  fileBlacklist: [/index.css|index.js|vendors.js/, /.whatever/]
})

這個(gè)插件還是蠻棒的，強(qiáng)烈推薦可以看看，也是本次分享的最后一個(gè)插件

它的作用在于能幫我們很清晰直觀的看到，你編譯后的每一個(gè)、每一個(gè)文件哦，內(nèi)容的分布組成，有利于我們快速查找包過(guò)大、內(nèi)容是否重復(fù)、問(wèn)題定位優(yōu)化等；

它會(huì)在編譯完成后，自動(dòng)啟動(dòng)一個(gè)服務(wù)、也可以自定義配置，打開(kāi)一個(gè)可視化窗口，鼠標(biāo)移動(dòng)到對(duì)應(yīng)的模塊上，都可以顯示出，該模塊在某文件內(nèi)占比的大小及stat、parsed、gzipped等的狀態(tài)；

analyzerHost、analyzerPort：自定配置打開(kāi)的地址、端口，默認(rèn)使用：127.0.0.1:8888

reportFilename： 報(bào)告生成的路徑，默認(rèn)以項(xiàng)目的output.path輸出；

openAnalyzer：是否要自動(dòng)打開(kāi)分析窗口，

其他還有很多屬性，官網(wǎng)也有，這里只是引導(dǎo)簡(jiǎn)介，請(qǐng)大佬們勿噴；

plugins:[
    new BundleAnalyzerPlugin({...}) //默認(rèn)配置就很好了，能滿足我們的要求
]

mini-css-extract-plugin 樣式提取插件

optimize-css-assets-webpack-plugin 樣式優(yōu)化壓縮/配合添加前綴等

html-webpack-plugin 生成入口文件，并注入依賴

uglifyjs-webpack-plugin js壓縮

preload-webpack-plugin 資源預(yù)加載

webpack-bundle-analyzer 可視化編譯分析

copy-webpack-plugin 文件拷貝

BannerPlugin 給文件開(kāi)頭處添加注釋

typings-for-css-modules-loader

awesome-typescript-loader

完整配置示例

　　以上就是今天為大家整理的幾個(gè)項(xiàng)目中常用的插件，可能有些地方理解的不是特別到位，歡迎大家補(bǔ)充，同時(shí)我也給大家準(zhǔn)備了一個(gè)整合后完整的webpack配置的示例，如有興趣可自行測(cè)試。

　　下一期計(jì)劃跟大家一起分享“React如何封裝一個(gè)組件”（或者說(shuō)沉淀一個(gè)組件庫(kù)）來(lái)簡(jiǎn)單實(shí)戰(zhàn)一下react如何上手？歡迎持續(xù)關(guān)注，如覺(jué)得不錯(cuò)記得點(diǎn)個(gè)贊哦，當(dāng)然您能動(dòng)動(dòng)手指關(guān)注下方公眾號(hào)就更棒了，謝謝支持！

如何給localStorage設(shè)置一個(gè)過(guò)期時(shí)間？
如何用CSS3畫出懂你的3D魔方？
SVG Sprites Icon的使用技巧
immutability因React官方出鏡之使用總結(jié)分享！
小程序項(xiàng)目之又一填坑小記
做完小程序項(xiàng)目、老板給我加了6k薪資～
面試踩過(guò)的坑，都在這里了～
你應(yīng)該做的前端性能優(yōu)化之總結(jié)大全！
如何給localStorage設(shè)置一個(gè)過(guò)期時(shí)間？
手把手教你如何繪制一輛會(huì)跑車

作者：蘇南 - 首席填坑官
鏈接：https://blog.csdn.net/weixin_...
交流：912594095、公眾號(hào)：honeyBadger8
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處。