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

plugins: [

new webpack.provideplugin({}),
new webpack.ignoreplugin(/^\.\/locale$/, /moment$/),
]

//production 指生產模式

new webpack.optimize.uglifyjsplugin(),
new webpack.optimize.occurrenceorderplugin(true),
]);

官方解釋如下

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

new webpack.provideplugin({})

new htmlwebpackplugin()

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

用法：

new webpack.provideplugin()

用途：定義全域性常量

用法：

new webpack.defineplugin(,

production: json.stringify(production),
}),

用途：忽略regexp匹配的模組

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

extracttextplugin

用途：分離css檔案

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

htmlwebpackplugin

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

用法：

new htmlwebpackplugin()

用途：js壓縮

用法：new webpack.optimize.uglifyjsplugin()

occurrenceorderplugin

用途：排序輸出

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

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

commonschunkplugin

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

用法：

new webpack.optimize.commonschunkplugin()

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

用法：如下，為vue 配置postcss

new webpack.loaderoptionsplugin(

}}),

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搭建乙個...