webpack4入門筆記——外掛

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-09
Web筆記

什麼是外掛？

loader用於打包檔案，plugins 用於解決一些其他任務，比如程式碼壓縮，去註釋等等

語法

plugins:[xx1,xx2]
複製程式碼

陣列中的引數要求是外掛物件的例項，即必須new

plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
]
複製程式碼

下面是一些常用的外掛

程式碼壓縮外掛

UglifyJsPlugin 已棄用，生產模式會自動壓縮

圖片壓縮外掛

imagemin-webpack-plugin 用於批量壓縮圖片

1 . 安裝

cnpm install imagemin-webpack-plugin --save
複製程式碼

2 . 配置

//引入外掛
var ImageminPlugin = require('imagemin-webpack-plugin').default;

//配置
plugins: [
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 開發時不啟用
      pngquant: {//圖片質量
        quality: '95-100'
      }
    })
]
複製程式碼

HTML檔案建立外掛

HtmlWebpackPlugin 用於建立html

多入口時，當你的 index.html 引入多個js，如果這些生成的js名稱構成有 [hash] ，那麼每次都能修改html中的js名稱

HtmlWebpackPlugin 在此可以用於自動重新生成一個index.html，已幫你把生產的所有js檔案引入，生成到output目錄

1 . 安裝

cnpm install html-webpack-plugin --save-dev
複製程式碼
  1. 配置
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
    new HtmlWebpackPlugin()
]
複製程式碼

清空資料夾外掛

clean-webpack-plugin 可以在每次打包時先清空指定的資料夾

1 . 安裝

cnpm install clean-webpack-plugin --save-dev
複製程式碼

2 . 配置

//引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
//清空dist資料夾
new CleanWebpackPlugin(['dist'])
複製程式碼

提供全域性變數

每次 import react 是不是很煩，使用這個外掛可以匯入到全域性，之後不用再import

語法： varName : filePath

//這些變數不必再import了
new webpack.ProvidePlugin({
    React:'react',
    ReactDOM:'react-dom'
})
複製程式碼

公共程式碼抽取

CommonsChunkPlugin 已棄用，使用optimization.splitChunks代替

作用

提取被重複引入的檔案，單獨生成一個或多個檔案，這樣避免在多入口重複打包檔案

安裝

無需安裝，內建

配置項

1 . cacheGroups 自定義配置主要使用它來決定生成的檔案

  • test 限制範圍，可以是正則，匹配資料夾或檔案
  • name 生成檔名
  • priority 優先順序，多個分組衝突時決定把程式碼放在哪塊
  • 其他參見下面

新的chunk檔案形成應該符合下面 2-4 條規則

2 . minSize 最小尺寸必須大於此值，預設30000B

3 . minChunks 其他entry引用次數大於此值，預設1

注：

  • 個人理解minChunks指的是被不同entry引入的次數
  • 為1時，適合分離 node_moudles 裡的第三方庫（很多人認為這個值設成2其實不合理）

4 . maxInitialRequests entry檔案請求的chunks不應該超過此值（請求過多，耗時）

5 . maxAsyncRequests 非同步請求的chunks不應該超過此值

6 . automaticNameDelimiter 自動命名連線符

7 . chunks 值為"initial", "async"（預設） 或 "all"

  • initial 入口chunk，對於非同步匯入的檔案不處理
  • async 非同步chunk，只對非同步匯入的檔案處理（個人理解）
  • all 全部chunk（我反正選all，不甚理解）

使用方式

1 . 使用預設配置

不配置時再production模式下開啟async

配置如下，啟用預設配置

optimization:{
    splitChunks:{
        chunks:"all"
    }
}
複製程式碼

生成的檔案 vendors~xx.js ，xx與入口名對應（可能不生成）。

附預設配置

optimization: {
    splitChunks: {
        chunks: "async",
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {//cacheGroups重寫繼承配置，設為false不繼承
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
}
複製程式碼
2 . 自定義配置

生成的檔案 xx.js ，xx指name的值

配置示例

optimization: {
	//打包 第三方庫
	//打包 公共檔案
	splitChunks: {
		cacheGroups: {
			vendor:{//node_modules內的依賴庫
				chunks:"all",
				test: /[\\/]node_modules[\\/]/,
				name:"vendor",
				minChunks: 1, //被不同entry引用次數(import),1次的話沒必要提取
				maxInitialRequests: 5,
				minSize: 0,
				priority:100,
				// enforce: true?
			},
			common: {// ‘src/js’ 下的js檔案
				chunks:"all",
				test:/[\\/]src[\\/]js[\\/]/,//也可以值檔案/[\\/]src[\\/]js[\\/].*\.js/,  
				name: "common", //生成檔名，依據output規則
				minChunks: 2,
				maxInitialRequests: 5,
				minSize: 0,
				priority:1
			}
		}
	}
}
複製程式碼

配合 runtimeChunk

optimization.runtimeChunk 用來提取 entry chunk 中的 runtime部分函式，形成一個單獨的檔案，這部分檔案不經常變換，方便做快取。

配置如下

runtimeChunk: {
  name: 'manifest'
}
複製程式碼

注：個人測試的時候，發現提出的東西很少，不是很理解這個 runtime

參考文件

官方

webpack4：連奏中的進化

Webpack4+ 多入口程式構建

相關文章