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

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享,公衆號:honeyBadger8,webpack4,從0配置到項目搭建

前言

  繼上一次webpack的基礎配置分享之後,本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件,如有分析不到位的,歡迎糾錯,嗯,這些東西文檔都有,大佬可繞過

  Wepack4之後廢棄了很多的插件,這裏只會講解webpack4還支持的(包含4之前插件),已經廢棄的將不再闡述。

  上一次的分享之後,有部分網友留言質疑:騙小白的贊、是否原創、是否是抄別人等等,當然也有很多的網友支持和鼓勵,不管褒貶,蘇南都非常的感謝,是你們讓我認識到自己的不足與優劣。

  大家的留言,讓我想起了自己剛入門前端初期的心酸,基本靠自己自學,沒有人帶,遇到問題像無頭的蒼蠅,到處亂撞網上一頓搜索,百度不曾欺我,在點了一個又一個的廣告之後,翻過十頁八頁之後終於找到了問題的解決方案。

  執着於對前端的熱愛,常常一個問題卡到深夜,初入前端的我曾一度感嘆在編輯器寫一些東西,在網頁上就能跑,甚至感嘆 js 寫上一個 alert hello world,瀏覽器就會自動彈出一個窗口,感覺全世界都在向你招手,當時的興奮是難以形容的,甚至幻想着未來有一天,可能有千萬、億萬的用戶,在用你寫的東西。

  這幾天一直在想,這篇插件的總結還是否要繼續寫下去?從寫博客到今天,將近兩個月吧,也算是一個新人,技術方面雖說工作了幾年,但也不敢說多牛B,寫博客的初衷是爲了對自己工作中遇到的問題/心得等做一個總結,俗話說:好記性不如爛筆頭;同時也希望能把自己遇到的問題、坑點分享給他人,讓遇到同樣問題的×××們能少走那麼一點點彎路。

  終於最後在想了很久之後明白,人無完人,百人百性、千人千面,不管你做總會有不同的聲音,同樣不管你分享什麼,總會有人需要。所以走自己的路,讓別人打車吧,堅持自己所想 努力成爲自己想成爲的樣子,就是對自己最大的肯定 ———— 至曾經初入前端的我們

  • 去做想做的事,去愛值得的人;
  • 去成爲自己喜歡的模樣,
  • 去讓自己發光!渾身充滿力量,
  • 充實的日子最美好!

各位早安,這裏是@IT·平頭哥聯盟,我是首席填坑官∙蘇南,用心分享 一起成長 做有溫度的攻城獅。<br/>
公衆號: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的特權;
    兩者編譯結果進行比較,公衆號:honeyBadger8
//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配置下的的splitChunksruntimeChunk基本是一致的,;
  • SplitChunksPlugin、RuntimeChunkPlugin,其實就是webpack4之前CommonsChunkPlugin的替代品,用於提取一些公共模塊;
  • chunks:要進行處理的類型,它有三個值:all,async,initial
  • minSize:最少大小
  • maxSize:最大包的大小,超出生成新的包
  • minChunks:至少要引用N次的模塊,
  • maxAsyncRequests:最大的按需加載並行請求數量
  • maxInitialRequests:最大的初始化加載請求次數
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}` //動態文件名
  })

HotModuleReplacementPlugin

  • 熱更新替換,在不刷新重載頁面的情況下更換編輯修改後的代碼:
  • 它只會更新改動過的內容,所以速度很快,幾乎在自己剛改完,切到瀏覽器窗口內容就已經更新完了;
  • 使用 HotModuleReplacementPlugin插件後,它會暴露一個module.hot對象,它下面有很多的屬性:
  • accept:它有兩個參數,一個是授權模塊(可以直接是單個文件路徑、也可以是一個數組包含多個文件路徑),第二個參數,是回調函數,即更新後要做的邏輯處理。
  • decline 有點黑名單的意思,就是忽略一些模塊,不更新它們,
  • status 當前更新的狀態,idle、check、prepare、ready、dispose、apply、fail等;
  • 一般只用到 accept 最多,下面有個示例;

以上爲自定配置中使用頻率較高的選項


//webpack config
plugins:[
    new webpack.HotModuleReplacementPlugin()
]

//路由入口頁
……
if (module.hot) {
    module
        .hot
        .accept([
            './pages/routes'
        ], (err) => {
            const NextRoute = require('./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', '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自帶的一個插件,不用另外再安裝依賴,

以上爲自定配置中使用頻率較高的選項,公衆號: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

  • 在使用這個插件之前,我們需要先了解一下 preloadprefetch,從字面意思上講:預加載
  • 不難理解,就是提前加載資源(匹配其他頁面可能用到的資源進行預先,從而達到無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等的狀態;
  • analyzerHostanalyzerPort:自定配置打開的地址、端口,默認使用:127.0.0.1:8888
  • reportFilename: 報告生成的路徑,默認以項目的output.path輸出;
  • openAnalyzer:是否要自動打開分析窗口,
  • 其他還有很多屬性,官網也有,這裏只是引導簡介,請大佬們勿噴;

以上爲自定配置中使用頻率較高的選項,公衆號:honeyBadger8
以上爲自定配置中使用頻率較高的選項,公衆號:honeyBadger8

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

常用的幾個插件地址彙總:

結尾:

  以上就是今天爲大家整理的幾個項目中常用的插件,可能有些地方理解的不是特別到位,歡迎大家補充,同時我也給大家準備了一個整合後完整的webpack配置的示例,如有興趣可自行測試。

  下一期計劃跟大家一起分享“React如何封裝一個組件”(或者說沉澱一個組件庫)來簡單實戰一下react如何上手?歡迎持續關注,如覺得不錯記得點個贊哦,當然您能動動手指關注下方公衆號就更棒了,謝謝支持!

寶劍鋒從磨礪出,梅花香自苦寒來,做有溫度的攻城獅!,公衆號:honeyBadger8

熱門推薦

作者:蘇南 - 首席填坑官
鏈接:https://blog.csdn.net/weixin_43254766/article/details/83758660
交流:912594095、公衆號:honeyBadger8
本文原創,著作權歸作者所有。商業轉載請聯繫@IT·平頭哥聯盟獲得授權,非商業轉載請註明原鏈接及出處。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章