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打包后，一些沒有依賴的方法 變量 文件會(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)排序?qū)崿F(xiàn)代碼
為了讓自定義選擇選擇出的節(jié)點(diǎn)集合盡可能接近原生API選出的結(jié)果，我們往往要對(duì)結(jié)果集進(jìn)行排序，此順序當(dāng)然是從上到下，從左到右的DOM樹順序。2011-01-01
JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別,結(jié)合額實(shí)例形式分析了JavaScript直接調(diào)用函數(shù)與call調(diào)用的基本用法、區(qū)別及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要介紹了詳解如何在JS代碼中消滅for循環(huán)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript基于setTimeout實(shí)現(xiàn)計(jì)數(shù)的方法
這篇文章主要介紹了JavaScript基于setTimeout實(shí)現(xiàn)計(jì)數(shù)的方法,涉及javascript中setTimeout方法的使用技巧,需要的朋友可以參考下2015-05-05
大家仔細(xì)看下面兩段代碼，代碼一的window.onload = doIt()函數(shù)后面有();而代碼二的window.onload = doIt函數(shù)名后面沒有括號(hào)。2008-09-09
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下2015-04-04
javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個(gè)簡單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學(xué)可以參考一下本文章。2015-08-08
這篇文章主要介紹了JavaScript switch語句使用方法簡介,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
基本js實(shí)現(xiàn)的星星投票選擇功能代碼。2010-07-07