webpack外掛程式配置及常用外掛程式

2021-09-16 23:46:01 字數 2069 閱讀 4207

plugins: [

new webpack.provideplugin({}),

new webpack.ignoreplugin(/^\.\/locale$/, /moment$/),

]

有的外掛程式是開發模式不用,到生產模式下才用,可如下設定

//production 指生產模式

new webpack.optimize.uglifyjsplugin(),

new webpack.optimize.occurrenceorderplugin(true),

]);

一直很疑惑,為什麼有的外掛程式是包裝在webpack中的webpack.plugin,有的是裸奔的plugin,專門去官方關注了一下這個問題,終於搞清楚了

官方解釋如下

翻譯一下,通過webpack配置的屬性包含在你模組中的外掛程式,再簡單易懂點,就是webpack自己的,所有權問題,嘿嘿。。。

new webpack.provideplugin({})
非內建,通過npm或其他方法發布的

new htmlwebpackplugin()
provideplugin

用途:$出現,就會自動載入模組;$預設為'jquery'的exports

用法:

new webpack.provideplugin()
defineplugin

用途:定義全域性常量

用法:

new webpack.defineplugin(,

production: json.stringify(production),

}),

ignoreplugin

用途:忽略regexp匹配的模組

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

extracttextplugin

用途:分離css檔案

用法:new extracttextplugin(production ? '[name]-[chunkhash].css' : '[name].css')

htmlwebpackplugin

用途:重構入口html,動態新增,在以hash命名的檔案上非常有用,因為每次編譯都會改變

用法:

new htmlwebpackplugin()
uglifyjsplugin

用途:js壓縮

用法:new webpack.optimize.uglifyjsplugin()

occurrenceorderplugin

用途:排序輸出

通過模組呼叫次數給模組分配ids,常用的ids就會分配更短的id,使ids可**,減小檔案大小,推薦使用

用法:new webpack.optimize.occurrenceorderplugin(true)

commonschunkplugin

用途:合併公共模組為單獨檔案,比如全域性通用的js等,長期不會修改的,從而可以從快取中取,優化網頁效能

用法:

new webpack.optimize.commonschunkplugin()
loaderoptionsplugin

用途:webpack1到webpack2遷移過渡專用,就像名字說的那樣,loader選項外掛程式,對於暫時不支援loader的options的屬性,使用此外掛程式

用法:如下,為vue 配置postcss

new webpack.loaderoptionsplugin(

}}),

webpack官方

webpack-using-plugins

gulpfile配置及常用外掛程式

需求 實現開發模式下啟動伺服器,檔案修改後實現自動過載 熱更新 打包模式下進行檔案壓縮與版本更新 防止快取 gulp版本為4.0.2 package.json scripts 與 devdependencies 依賴包安裝 author ys license isc dependencies dev...

webpack常用外掛程式複習鞏固

npm init y 生產package.json檔案ul li 9發現需要解決js相容性問題,import from jquery 通過發現這種方式匯入報錯,1,npm install webpack webpack cli d 2,建立webpack.config.js檔案 3,module.e...

webpack 專案常用配置

這裡我整理了一些webpack的常用配置,適用於稍有webpack基礎的同學閱讀,也給自己以後的工作提供一些便利。有些地方沒做詳細說明,如有不明,請查閱官網手冊或各種大牛部落格。閱讀前大家最好先瀏覽一下webpack官網,了解一下webpack是什麼樣的乙個工具,同時對怎麼利用webpack搭建乙個...