webpack 5 mode的作用和區(qū)別

通過(guò)選擇 development, production 或 none 之中的一個(gè)，來(lái)設(shè)置 mode 參數(shù)，你可以啟用 webpack 內(nèi)置在相應(yīng)環(huán)境下的優(yōu)化。其默認(rèn)值為 production。

會(huì)將 DefinePlugin 中 process.env.NODE_ENV 的值設(shè)置為 developmen或者production. 為模塊和 chunk 啟用有效的名。

例如js文件里面打印 process.env.NODE_ENV會(huì)得到你配置的值

development和production的區(qū)別

代碼編譯后的結(jié)果不同

development模式

development模式會(huì)把js內(nèi)容放到eval里面執(zhí)行，打包后的js文件內(nèi)容如下：

eval的作用是動(dòng)態(tài)執(zhí)行js，這樣可以方便動(dòng)態(tài)更新里面的內(nèi)容

((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sum__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sum */ \"./src/sum.js\");\n\nconsole.log(\"dsfasdf\")\nconst result = (0,_sum__WEBPACK_IMPORTED_MODULE_0__[\"default\"])([1, 2]);\nconsole.log(\"result\", result)\nconst result2 = (0,_sum__WEBPACK_IMPORTED_MODULE_0__[\"default\"])([1, 2, 3]);\nconsole.log(\"result\", result2)\nconsole.log(\"env\", \"development\")\n\n//# sourceURL=webpack://demo1/./src/main.js?");
});

production模式

則是編譯后的純代碼

(()=>{"use strict";
const o=o=>o.reduce(((o,s)=>o+s),0);
console.log("dsfasdf");
const s=o([1,2]);
console.log("result",s);
const c=o([1,2,3]);
console.log("result",c),
console.log("env","production")
})();

production開(kāi)啟內(nèi)部插件，development沒(méi)有

• FlagDependencyUsagePlugin：編譯時(shí)標(biāo)記nodemodule依賴(lài) unused harmony export ，用于 Tree shaking（移除沒(méi)有使用到的代碼）
• FlagIncludedChunksPlugin 編譯時(shí)候標(biāo)記，移除chunks中沒(méi)有使用到的代碼（文件分割后輸入的文件叫做chunk文件）
• ModuleConcatenationPlugin:在webpack打包時(shí)，將bundle 內(nèi)各個(gè)模塊預(yù)編譯到一個(gè)閉包中，提升代碼在瀏覽器中的執(zhí)行速度（相比之前的打包方式—每個(gè)模塊都是一個(gè)閉包）
•   NoEmitOnErrorsPlugin:在編譯出現(xiàn)錯(cuò)誤時(shí)，跳過(guò)輸出階段。這樣可以確保輸出資源不會(huì)包含錯(cuò)誤

實(shí)戰(zhàn)

初始化npm項(xiàng)目

npm init -y     

目錄下生成了package.json 文件

安裝webpack依賴(lài)

npm i webpack weblack-cli -D

新建src/main.js,內(nèi)容如下：

import sum from "./sum"
console.log("dsfasdf")
const result = sum([1, 2]);
console.log("result", result)
const result2 = sum([1, 2, 3]);
console.log("result", result2)
console.log("env", process.env.NODE_ENV)

新建src/sum.js,內(nèi)容如下：

var sum = (arr) => arr.reduce((pre, curr) => {
    pre += curr;
    return pre;
}, 0)
export default sum;

執(zhí)行命令：

npx webpack ./src/mian.js ---mode=development

得到目錄/.dist/main.js，內(nèi)容如上面所述的development模式的內(nèi)容

執(zhí)行命令：

npx webpack ./src/mian.js ---mode=production

得到目錄/.dist/main.js，內(nèi)容如上面所述的production模式的內(nèi)容

輸入內(nèi)容為空

如果main.js文件內(nèi)容如下

var sum = (arr) => arr.reduce((pre, curr) => {
    pre += curr;
    return pre;
}, 0)
export default sum;

在production模式下輸出文件內(nèi)容為空，因?yàn)殚_(kāi)啟了FlagIncludedChunksPlugin模塊，移除了沒(méi)有被調(diào)用的代碼 

補(bǔ)充：

Webpack5開(kāi)發(fā)模式選擇

Webpack 5 是一款強(qiáng)大的模塊打包工具，可用于將許多分散的模塊按照依賴(lài)關(guān)系打包成一個(gè)（或多個(gè)）bundle。在Webpack 5中，主要有兩種開(kāi)發(fā)模式，分別是開(kāi)發(fā)模式（development）和生產(chǎn)模式（production）。這兩種模式主要的區(qū)別和各自的作用如下：

1.開(kāi)發(fā)模式（development）：這種模式主要是為了提升開(kāi)發(fā)過(guò)程中的體驗(yàn)，做了一些優(yōu)化。如：

• 開(kāi)啟了模塊熱替換（HMR）：應(yīng)用程序運(yùn)行過(guò)程中替換、添加或刪除模塊，無(wú)需完全刷新頁(yè)面。
• 優(yōu)化了構(gòu)建速度：使用了更快的內(nèi)存中的編譯和評(píng)估。
• 提供了更詳細(xì)的錯(cuò)誤和警告信息：幫助開(kāi)發(fā)者更好地理解和解決問(wèn)題。
• 編譯后的代碼不會(huì)被壓縮，便于調(diào)試和分析。

2.生產(chǎn)模式（production）：這種模式主要是為了優(yōu)化打包后的代碼，提升運(yùn)行效率。如：

• 自動(dòng)刪除未引用代碼（tree shaking）：只打包實(shí)際需要的代碼，減小bundle的大小。
• 自動(dòng)進(jìn)行代碼壓縮：通過(guò)UglifyJS或者Terser等工具，將代碼中的空格、換行等無(wú)用字符刪除，變量名簡(jiǎn)化等，以減小bundle的大小。
• 自動(dòng)設(shè)置process.env.NODE_ENV為production，讓一些庫(kù)如React等在生產(chǎn)環(huán)境下運(yùn)行更優(yōu)化的代碼。

記住，你可以通過(guò)在webpack的配置文件中設(shè)置mode字段為development或production來(lái)選擇使用哪種模式。默認(rèn)情況下，mode的值為production。

到此這篇關(guān)于webpack 5 mode的作用和區(qū)別的文章就介紹到這了,更多相關(guān)webpack 5 mode內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論