webpack4配置詳解之常用外掛分享

蘇南發表於2018-11-19
Web

前言

  繼上一次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的特權;
  • 使用示例：

兩者編譯結果進行比較，首席填坑官∙蘇南的專欄，webpack配置外掛
兩者編譯結果進行比較

//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.optimize.SplitChunksPlugin({
    chunks: 'async', 
    minSize: 30000, 
    maxSize: 0, 
    minChunks: 1,  
    maxAsyncRequests: 1,
    maxInitialRequests:1, 
    name: true, //可以指定
    ……,//首席填坑官∙蘇南的專欄 交流：912594095
    
}),
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 最多，下面有個示例；

HotModuleReplacementPlugin 使用頻率較高的選項，首席填坑官∙蘇南的專欄
熱更新替換展示過程


//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 ，用於處理快取，如：；
  • 其他：favicon、meta、title ……；

new HtmlWebPackPlugin({
  filename: path.resolve(__dirname, '../assets/index.html'), 
  template: path.resolve(__dirname,"../views/temp.html"),
  minify:{ //壓縮HTML檔案&emsp;
&emsp;&emsp;removeComments:true, 
&emsp;&emsp;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
BannerPlugin對文件插入註釋說明


//字串：
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"標籤即可；
  • 示例：
  • 而preload-webpack-plugin它的作用就是在編譯打包的時候，幫我們把以上的操作都做了，
  • 編譯完成後，你可以（指定某些/全部）檔案動態插入到 HtmlWebPackPlugin 配置輸出的檔案內，
  • as： 表示你預載入的資源型別；可以有有先多：script、font、image、style、video等等，更多詳細請檢視API，它還可以返回function；
  • include：要插入，進行預載入的檔案，它有：allChunks、initial、asyncChunks、陣列等選項，陣列即表示指定插入某些檔案
  • fileBlacklist:即檔案黑名單，可以指定某個檔案，也可以使用正則來匹配；

、)

首席填坑官∙蘇南的專欄，webpack配置，外掛的使用，公眾號：honeyBadger8
preload-webpack-plugin 資源預載入


//注意點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
圖片摘自官方示例gif

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


複製程式碼

常用的幾個外掛地址彙總：

結尾：

  以上就是今天為大家整理的幾個專案中常用的外掛，可能有些地方理解的不是特別到位，歡迎大家補充，同時我也給大家準備了一個整合後完整的webpack配置的示例，如有興趣可自行測試，如果覺得不錯記得點個贊哦，當然您能動動手指關注下方公眾號就更棒了，謝謝支援！

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅!
用心分享 讓我們一起成長 做有溫度的攻城獅

作者：蘇南 - 首席填坑官

連結：blog.csdn.net/weixin_4325…

交流：912594095、公眾號：honeyBadger8

本文原創，著作權歸作者所有。商業轉載請聯絡@IT·平頭哥聯盟獲得授權，非商業轉載請註明原連結及出處。

相關文章