前言
　　
　　繼上一次webpack的基礎配置分享之後，本次將分享一些工作中項目常用的配置插件、也會包含一些自己了解過覺得不錯的插件，如有分析不到位的，歡迎糾錯，嗯，這些東西文檔都有，大佬可繞過。
　　
　　Wepack4之後廢棄了很多的插件，這裏只會講解webpack4還支持的（包含4之前插件），已經廢棄的將不再闡述。
　　
　　上一次的分享之後，有部分掘金網友留言質疑：騙小白的贊、是否原創、是否是抄別人等等，當然也有很多的網友支持和鼓勵，不管褒貶，蘇南都非常的感謝，是你們讓我認識到自己的不足與優劣。
　　
　　大家的留言，讓我想起了自己剛入門前端初期的心酸，基本靠自己自學，沒有人帶，遇到問題像無頭的蒼蠅，到處亂撞網上一頓搜索，百度不曾欺我，在點了一個又一個的廣告之後，翻過十頁八頁之後終於找到了問題的解決方案。
　　
　　執著於對前端的熱愛，常常一個問題卡到深夜，初入前端的我曾一度感嘆在編輯器寫一些東西，在網頁上就能跑，甚至感嘆 js 寫上一個 alert hello world，瀏覽器就會自動彈出一個窗口，感覺全世界都在向你招手，當時的興奮是難以形容的，甚至幻想著未來有一天，可能有千萬、億萬的用戶，在用你寫的東西。
　　
　　這幾天一直在想，這篇插件的總結還是否要繼續寫下去？從寫博客到今天，將近兩個月吧，也算是一個新人，技術方面雖說工作了幾年，但也不敢說多牛B，寫博客的初衷是為了對自己工作中遇到的問題/心得等做一個總結，俗話說：好記性不如爛筆頭；同時也希望能把自己遇到的問題、坑點分享給他人，讓遇到同樣問題的基友們能少走那麽一點點彎路。
　　
　　終於最後在想了很久之後明白，人無完人，百人百性、千人千面，不管你做總會有不同的聲音，同樣不管你分享什麽，總會有人需要。所以走自己的路，讓別人打車吧，堅持自己所想 努力成為自己想成為的樣子，就是對自己最大的肯定 ———— 至曾經初入前端的我們。
　　
　　去做想做的事，去愛值得的人；
　　
　　去成為自己喜歡的模樣，
　　
　　去讓自己發光！渾身充滿力量，
　　
　　充實的日子最美好！
　　
　　各位早安，這裏是@IT·平頭哥聯盟，我是首席填坑官?蘇南，用心分享 一起成長 做有溫度的攻城獅。 公眾號：honeyBadger8，群：912594095
　　
　　mini-css-extract-plugin
　　
　　css-提取，看名字就懂提取css用的。
　　
　　在這之前我們可能會使用extract-text-webpack-plugin比較多一些，兩者相比它有什麽優勢呢？
　　
　　extract-text-webpack-plugin 它對css的提取，最終是根據你創建的實例、或者配置多個入口 chunk來的，
　　
　　比如你配置了一個入口文件，最終所有的css都會提取在一個樣式文件裏，
　　
　　如果你創建了多個extract-text-webpack-plugin實例，則會生成多個css的文件，
　　
　　而mini-css-extract-plugin，它默認就會對你的樣式進行模塊化拆分，嗯，有點跟output裏的配置一個意思，異步按需加載，不再僅僅是js的特權; 兩者編譯結果進行比較
　　
　　//extract-text-webpack-plugin 編譯打包
　　
　　config.module.rules.push({
　　
　　test: /\.(scss|css)$/,
　　
　　use: ExtractTextPlugin.extract({
　　
　　use: [
　　
　　"css-loader",
　　
　　{ //首席填坑官?蘇南的專欄 交流：912594095、公眾號：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)$/,//同時處理css/scss
　　
　　use: [
　　
　　{
　　
　　loader: MiniCssExtractPlugin.loader,
　　
　　},
　　
　　"css-loader", //css處理器
　　
　　{
　　
　　loader: ‘postcss-loader‘,
　　
　　/*
　　
　　postcss 這個插件的作用在於，與已有的工具集成一起使用，很少有單獨使用的情況，
　　
　　通用我們用的最多的，是配合 autoprefixer 來添加各瀏覽器的前綴，以達到更好的兼容，
　　
　　再深入一些就是 cssnext 就是允許開發者自定義屬性和變量 ： color:var(--theme-color,#42b983);
　　
　　*/
　　
　　options: {
　　
　　plugins: [
　　
　　require(‘autoprefixer‘)({
　　
　　browsers: CSS_BROWSERS,
　　
　　}),
　　
　　],
　　
　　},
　　
　　},
　　
　　"sass-loader" //sass處理器 、甚至還可以再加一個less的處理器
　　
　　]
　　
　　})
　　
　　config.plugins.push(new MiniCssExtractPlugin({
　　
　　filename: ‘css/[name].css‘, //這裏配置跟output寫法一致
　　
　　chunkFilename: ‘css/[id][chunkhash:8].css‘,
　　
　　}));
　　
　　config.plugins.push(new OptimizeCssAssetsPlugin({})); //壓縮文件
　　
　　optimize-css-assets-webpack-plugin
　　
　　上面的示例裏已經用到了，它的作用在於壓縮css文件，
　　
　　assetNameRegExp：默認是全部的css都會壓縮，該字段可以進行指定某些要處理的文件，
　　
　　cssProcessor：指定一個優化css的處理器，默認cssnano，
　　
　　cssProcessorPluginOptions：cssProcessor後面可以跟一個process方法，會返回一個promise對象，而cssProcessorPluginOptions就是一個options參數選項！
　　
　　canPrint：布爾，是否要將編譯的消息顯示在控制臺，沒發現有什麽用！
　　
　　坑點 ：建議使用高版本的包，之前低版本有遇到樣式丟失把各瀏覽器前綴幹掉的問題，
　　
　　new OptimizeCssAssetsPlugin({
　　
　　assetNameRegExp: /\.optimize\.css$/g,
　　
　　cssProcessor: require(‘cssnano‘),
　　
　　cssProcessorPluginOptions: {
　　
　　preset: [‘default‘, { discardComments: { removeAll: true } }],
　　
　　//autoprefixer: { browsers: CSS_BROWSERS }, 也是可以指定前綴的
　　
　　},
　　
　　canPrint: true
　　
　　})
　　
　　SplitChunksPlugin、RuntimeChunkPlugin
　　
　　它們跟上一篇的optimization配置下的的splitChunks、runtimeChunk基本是一致的，；
　　
　　SplitChunksPlugin、RuntimeChunkPlugin，其實就是webpack4之前CommonsChunkPlugin的替代品，用於提取一些公共模塊；
　　
　　chunks：要進行處理的類型，它有三個值：all,async,initial
　　
　　minSize：最少大小
　　
　　maxSize：最大包的大小，超出生成新的包
　　
　　minChunks：至少要引用N次的模塊，
　　
　　maxAsyncRequests：最大的按需加載並行請求數量
　　
　　maxInitialRequests：最大的初始化加載請求次數
　　
　　new webpack.www.yigouyule2.cn optimize.SplitChunksPlugin({
　　
　　chunks: ‘async‘,
　　
　　minSize: 30000,
　　
　　maxSize: 0,
　　
　　minChunks: 1,
　　
　　maxAsyncRequests: 1,
　　
　　maxInitialRequests:1,
　　
　　name: true, //可以指定
　　
　　……,
　　
　　}),
　　
　　new webpack.optimize.RuntimeChunkPlugin({
　　
　　name: ‘manifest‘,
　　
　　name: entrypoint =www.michenggw.com> `runtimechunk~${entrypoint.name}` //動態文件名
　　
　　})
　　
　　HotModuleReplacementPlugin
　　
　　熱更新替換，在不刷新重載頁面的情況下更換編輯修改後的代碼：
　　
　　它只會更新改動過的內容，所以速度很快，幾乎在自己剛改完，切到瀏覽器窗口內容就已經更新完了；
　　
　　使用 HotModuleReplacementPlugin插件後，它會暴露一個module.hot對象，它下面有很多的屬性：
　　
　　accept：它有兩個參數，一個是授權模塊(可以直接是單個文件路徑、也可以是一個數組包含多個文件路徑)，第二個參數，是回調函數，即更新後要做的邏輯處理。
　　
　　decline 有點黑名單的意思，就是忽略一些模塊，不更新它們，
　　
　　status 當前更新的狀態，idle、check、prepare、ready、dispose、apply、fail等；
　　
　　一般只用到 accept 最多，下面有個示例；
　　
　　熱更新替換展示過程
　　
　　new webpack.HotModuleReplacementPlugin(www.gcyl152.com/)
　　
　　//路由入口頁
　　
　　……
　　
　　if (module.hot) {
　　
　　module
　　
　　.hot
　　
　　.accept([
　　
　　‘./pages/routes‘
　　
　　], (err) => {
　　
　　const NextRoute = require(‘www.gcyl159.com./pages/routes‘)
　　
　　// 從DOM 中移除已經掛載的 React 組件 然後重裝
　　
　　ReactDOM.unmountComponentAtNode(APP_DOM);
　　
　　ReactDOM.render(
　　
　　<Provider store={Store}>
　　
　　<Router routes={NextRoute} history={browserHistory}/>
　　
　　</Provider>, APP_DOM);
　　
　　});
　　
　　}
　　
　　……
　　
　　html-webpack-plugin
　　
　　這個插件相信大家都熟悉的不能再熟悉了,
　　
　　把編譯後的文件（css/js）插入到入口文件中，可以只指定某些文件插入，可以對html進行壓縮等
　　
　　filename：輸出文件名；
　　
　　template：模板文件，不局限於html後綴哦；
　　
　　removeComments：移除HTML中的註釋；
　　
　　collapseWhitespace：刪除空白符與換行符，整個文件會壓成一行；
　　
　　inlineSource：插入到html的css、js文件都要內聯，即不是以link、script的形式引入；
　　
　　inject：是否能註入內容到 輸出 的頁面去；
　　
　　chunks：指定插入某些模塊；
　　
　　hash：每次會在插入的文件後面加上hash ，用於處理緩存，如：<link href="/css/index.css?v=a6fc12dd5002c">；
　　
　　其他：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‘,www.365soke.com ‘index‘], //首席填坑官?蘇南的專欄
　　
　　hash:true,
　　
　　favicon、meta、title等都可以配置，頁面內使用「<%= htmlWebpackPlugin.options.title %>」即可
　　
　　……
　　
　　})
　　
　　uglifyjs-webpack-plugin
　　
　　js代碼壓縮,默認會使用 optimization.minimizer，
　　
　　cache: Boolean/String ,字符串即是緩存文件存放的路徑；
　　
　　test：正則表達式、字符串、數組都可以，用於只匹配某些文件，如：/.js(?.*)?$/i;
　　
　　parallel : 啟用多線程並行運行來提高編譯速度，經常編譯的時候聽到電腦跑的呼呼響，可能就是它幹的，哈哈～；
　　
　　output.comments ： 刪除所有註釋，
　　
　　compress.warnings ：插件在進行刪除一些無用代碼的時候，不提示警告，
　　
　　compress.drop_console：喜歡打console的同學，它能自動幫你過濾掉，再也不用擔心線上還打印日誌了；
　　
　　等等還有一些如：定義壓縮的程度、提出多次出現但沒有變量的值的配置，想深入的同學可移步官方；
　　
　　//默認：
　　
　　optimization:{
　　
　　minimizer:true
　　
　　};
　　
　　//自定義
　　
　　minimizer: [
　　
　　new UglifyJsPlugin({
　　
　　cache: true,
　　
　　// cache: "assets",
　　
　　parallel: true, //也可以指定 Number ,即最多並行運行數量
　　
　　sourceMap: true,
　　
　　uglifyOptions: {
　　
　　output: {
　　
　　comments: false,
　　
　　…… //首席填坑官?蘇南的專欄，QQ:912594095
　　
　　},
　　
　　compress: {
　　
　　warnings: false,
　　
　　drop_console:true,
　　
　　……
　　
　　}
　　
　　},
　　
　　}),
　　
　　],
　　
　　BannerPlugin
　　
　　這個插件，它的作用在於某些時候，我們需要對文件添加一些說明，比如版本號，作者、日期等，
　　
　　它就可以幫到，每次編譯，在頭部插件一些註釋；
　　
　　它可以直接是一個字符串，也可以是一個options;
　　
　　嗯，差點忘說了，它是webpack自帶的一個插件，不用另外再安裝依賴，
　　
　　以上為自定配置中使用頻率較高的選項，公ZH：honeyBadger8
　　
　　//字符串：
　　
　　new webpack.BannerPlugin(‘給文件添加一些信息，打包日期：‘+ new Date());
　　
　　//自定義
　　
　　plugins: [
　　
　　new webpack.BannerPlugin({
　　
　　{
　　
　　banner: ‘ \n @item:蘇南的項目 \n @author:suSouth \n @date:‘+new Date()+‘ \n @description:蘇南的項目 \n @version:‘+package.version+‘ \n‘, // 要輸出的註釋內容
　　
　　test:string/正則/數組，//可用於匹配某些文件才輸出，
　　
　　entryOnly: boolean, // 即是否只在入口 模塊 文件中添加註釋；
　　
　　……
　　
　　}
　　
　　})
　　
　　],
　　
　　preload-webpack-plugin
　　
　　在使用這個插件之前，我們需要先了解一下 preload、prefetch，從字面意思上講：預加載，
　　
　　不難理解，就是提前加載資源(匹配其他頁面可能用到的資源進行預先，從而達到無loading ，用戶無感知的跳轉)，它的使用也非常的簡單，在你要進行預加載的資源上添加 rel="preload"標簽即可；
　　
　　示例：<link rel="preload" href="index.css" as="style" />
　　
　　而preload-webpack-plugin它的作用就是在編譯打包的時候，幫我們把以上的操作都做了，
　　
　　編譯完成後，你可以（指定某些/全部）文件動態插入到 HtmlWebPackPlugin 配置輸出的文件內，
　　
　　as： 表示你預加載的資源類型；可以有有先多：script、font、image、style、video等等，更多詳細請查看API，它還可以返回function；
　　
　　include：要插入，進行預加載的文件，它有：allChunks、initial、asyncChunks、數組等選項，數組即表示指定插入某些文件
　　
　　fileBlacklist:即文件黑名單，可以指定某個文件，也可以使用正則來匹配；
　　
　　以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8
　　
　　//註意點1：請把配置一定寫在HtmlWebPackPlugin插件之後，否則會報`HtmlWebpackPlugin.getHooks is not a function`錯誤，
　　
　　//註意點2：webpack4之後，請使用最新版本 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/]
　　
　　})
　　
　　webpack-bundle-analyzer
　　
　　這個插件還是蠻棒的，強烈推薦可以看看，也是本次分享的最後一個插件
　　
　　它的作用在於能幫我們很清晰直觀的看到，你編譯後的每一個、每一個文件哦，內容的分布組成，有利於我們快速查找包過大、內容是否重復、問題定位優化等；
　　
　　它會在編譯完成後，自動啟動一個服務、也可以自定義配置，打開一個可視化窗口，鼠標移動到對應的模塊上，都可以顯示出，該模塊在某文件內占比的大小及stat、parsed、gzipped等的狀態；
　　
　　analyzerHost、analyzerPort：自定配置打開的地址、端口，默認使用：127.0.0.1:8888
　　
　　reportFilename： 報告生成的路徑，默認以項目的output.path輸出；
　　
　　openAnalyzer：是否要自動打開分析窗口，
　　
　　其他還有很多屬性，官網也有，這裏只是引導簡介，請大佬們勿噴；
　　
　　以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8 以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8
　　
　　plugins:[
　　
　　new BundleAnalyzerPlugin({...}) //默認配置就很好了，能滿足我們的要求
　　
　　]
　　
　　常用的幾個插件地址匯總：
　　
　　mini-css-extract-plugin 樣式提取插件
　　
　　optimize-css-assets-webpack-plugin 樣式優化壓縮/配合添加前綴等
　　
　　html-webpack-plugin 生成入口文件，並註入依賴
　　
　　uglifyjs-webpack-plugin js壓縮
　　
　　preload-webpack-plugin 資源預加載
　　
　　webpack-bundle-analyzer 可視化編譯分析
　　
　　copy-webpack-plugin 文件拷貝
　　
　　BannerPlugin 給文件開頭處添加註釋
　　
　　typings-for-css-modules-loader
　　
　　awesome-typescript-loader

webpack4配置詳解之常用插件分享