webpackPlugin外掛程式總結

自動生成html，基本用法：

new htmlwebpackplugin()

拷貝資源外掛程式

基本用法：

new copywebpackplugin([
])

倆個外掛程式效果一致，都是生成編譯結果的資源單，只是資源單的資料結構不一致而已。

webpack-manifest-plugin 基本用法：

module.exports =

assets-webpack-plugin 基本用法：

module.exports =

在編譯之前清理指定目錄指定內容。

基本用法：

// 清理目錄
const pathstoclean = [
'dist',
'build'] 
// 清理引數
const cleanoptions = 
module.exports =

提供帶 content-encoding 編碼的壓縮版的資源

基本用法：

module.exports =

編譯進度條外掛程式

基本用法：

module.exports =

自動載入模組，如 $ 出現，就會自動載入模組；$ 預設為'jquery'的exports

用法：

new webpack.provideplugin()

定義全域性常量

用法：

new webpack.defineplugin(
})

提取css樣式，對比：

mini-css-extract-plugin 為webpack4及以上提供的plugin，支援css chunk

extract-text-webpack-plugin 只能在webpack3 及一下的版本使用，不支援css chunk

基本用法 extract-text-webpack-plugin：

const extracttextplugin = require("extract-text-webpack-plugin");
module.exports = )}]
},plugins: [
new extracttextplugin("styles.css"),
]}

基本用法 mini-css-extract-plugin：

const minics***tractplugin = require("mini-css-extract-plugin");
module.exports = 
},"css-loader"]}
]},
plugins: [
new minics***tractplugin()
]}

忽略regexp匹配的模組

用法：new webpack.ignoreplugin(/^./locale$/, /moment$/)

**醜化，用於js壓縮

用法：

module.exports = ,
output: }}]
}};

css壓縮，主要使用 cssnano 壓縮器

用法：

module.exports =  } // 去除所有注釋
})]}};

使你的chunk根據內容生成md5，用這個md5取代 webpack chunkhash。

var webpackmd5hash = require('webpack-md5-hash');
module.exports = ,
plugins: [
new webpackmd5hash()
]};

commonchunkplugin 的後世，用於chunk切割。

webpack 把 chunk 分為兩種型別，一種是初始載入initial chunk，另外一種是非同步載入 async chunk，如果不配置splitchunksplugin，webpack會在production的模式下自動開啟，預設情況下，webpack會將 node_modules 下的所有模組定義為非同步載入模組，並分析你的 entry、動態載入（import()、require.ensure）模組，找出這些模組之間共用的node_modules下的模組，並將這些模組提取到單獨的chunk中，在需要的時候非同步載入到頁面當中，其中預設配置如下：

module.exports = ,
default: }}
}};

dllplugin 將模組預先編譯，dllreferenceplugin 將預先編譯好的模組關聯到當前編譯中，當 webpack 解析到這些模組時，會直接使用預先編譯好的模組。

autodll-webpack-plugin 相當於 dllplugin 和 dllreferenceplugin 的簡化版，其實本質也是使用 dllplugin && dllreferenceplugin，它會在第一次編譯的時候將配置好的需要預先編譯的模組編譯在快取中，第二次編譯的時候，解析到這些模組就直接使用快取，而不是去編譯這些模組。

dllplugin 基本用法：

const output = 
module.exports = ,
output: output,
plugins: [
new webpack.dllplugin(.json`),
name: output.library // 全域性變數名， 也就是 window 下 的 [output.library]
})]}

const manifest = path.resolve(process.cwd(), 'vendor', 'vendor.js.json')
module.exports = 
]}

module.exports = 
})]}

多執行緒編譯，加快編譯速度，thread-loader不可以和 mini-css-extract-plugin 結合使用。

const os = require('os');

module.exports = ,

include: [path.resolve(process.cwd(), 'src')]

}]},

loaders: ['babel-loader']

})]}

module.exports = 
]}}

使用模組編譯快取，加快編譯速度。

hard-source-webpack-plugin 基本用法：

module.exports = 
cache-loader 基本用法：
module.exports = 
]}}

編譯模組分析外掛程式

基本用法：

new bundleanalyzerplugin(),

stats-webpack-plugin 將構建的統計資訊寫入檔案，該檔案可在並根據分析結果，可使用 prefetchplugin 對部分模組進行預解析編譯（本人也不理解這個plugin，據說優化效果不明顯，有興趣的同學請見 how-to-optimize-webpacks-build-time-using-prefetchplugin-analyse-tool）。

stats-webpack-plugin 基本用法：

module.exports = )
]};

prefetchplugin 基本用法：

module.exports =

統計編譯過程中，各loader和plugin使用的時間。

const speedmeasureplugin = require("speed-measure-webpack-plugin");
const smp = new speedmeasureplugin();
const webpackconfig = 
module.exports = smp.wrap(webpackconfig);

webpackPlugin外掛程式總結

webpackPlugin外掛程式總結

外掛程式滾動外掛程式slimScroll

外掛程式框架4 核心外掛程式之日誌外掛程式

webpackPlugin外掛程式總結

webpackPlugin外掛程式總結

外掛程式 滾動外掛程式slimScroll

外掛程式框架4 核心外掛程式之日誌外掛程式

相關推薦

外掛程式滾動外掛程式slimScroll