webpack中的模式(mode)使用詳解
模式(mode)
提供 mode 配置選項(xiàng)，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化。
用法
只在配置中提供 mode 選項(xiàng)：
module.exports = {
mode: 'production'
};
或者從 CLI 參數(shù)中傳遞：
webpack --mode=production
支持以下字符串值：
1.development
會(huì)將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
2.production
會(huì)將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
// webpack.production.config.js
module.exports = {
+ mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}
production模式下會(huì)啟用UglifyJsPlugin插件（移除未使用的內(nèi)容和文件壓縮），分別用production和development打包，編譯的區(qū)別：
1.development打包后，一些沒(méi)有依賴的方法 變量 文件會(huì)保留，production則會(huì)移除。
2.production打包后，代碼會(huì)進(jìn)行壓縮，比development的文件小。
到此這篇關(guān)于webpack中的模式(mode)使用詳解的文章就介紹到這了,更多相關(guān)webpack 模式內(nèi)容請(qǐng)搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
javascript移出節(jié)點(diǎn)removeChild()使用介紹
這篇文章主要介紹了javascript節(jié)點(diǎn)操作移出節(jié)點(diǎn)removeChild()的使用,需要的朋友可以參考下2014-04-04
詳解JavaScript實(shí)現(xiàn)繼承的五種經(jīng)典方式(附圖解)
JavaScript中的繼承是一種機(jī)制,通過(guò)它可以創(chuàng)建一個(gè)對(duì)象,該對(duì)象可以享有另一個(gè)對(duì)象的屬性和方法,本文將詳細(xì)的為大家介紹實(shí)現(xiàn)繼承的五種經(jīng)典方式,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08
經(jīng)常在一些博客中看到有一個(gè)打賞功能，本篇文章主要介紹了博客打賞功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
任何一種編程語(yǔ)言的簡(jiǎn)寫小技巧都是為了幫助你寫出更簡(jiǎn)潔、更完善的代碼,讓你用更少的編碼實(shí)現(xiàn)你的需求,這篇文章主要給大家介紹了關(guān)于javascript代碼簡(jiǎn)寫的幾種常用方式,需要的朋友可以參考下2021-08-08
微信小程序swiper-dot中的點(diǎn)如何改成滑塊詳解
swiper組件是滑塊視圖容器,這篇文章主要給大家介紹了關(guān)于微信小程序swiper-dot中的點(diǎn)如何改成滑塊的相關(guān)資料,實(shí)現(xiàn)以后的效果還是不錯(cuò)的,需要的朋友可以參考下2021-07-07
理解JavaScript中的事件...2006-09-09
Javascript構(gòu)造函數(shù)是非常強(qiáng)大的,它可能也是Javascript能被充分利用的特點(diǎn)之一,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),這篇文章主要給大家介紹了關(guān)于JavaScript構(gòu)造函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了JS的數(shù)組方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)站換膚，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中的Array 對(duì)象（數(shù)組對(duì)象）
Array 對(duì)象用于在單個(gè)的變量中存儲(chǔ)多個(gè)值。2016-06-06