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

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

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

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

development和production的區(qū)別

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

development模式

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

eval的作用是動態(tài)執(zhí)行js，這樣可以方便動態(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開啟內(nèi)部插件，development沒有

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

實戰(zhàn)

初始化npm項目

npm init -y     

目錄下生成了package.json 文件

安裝webpack依賴

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)容為空，因為開啟了FlagIncludedChunksPlugin模塊，移除了沒有被調(diào)用的代碼 

補充：

Webpack5開發(fā)模式選擇

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

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

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

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

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

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

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

最新評論