webpack 5 mode的作用和区别

通过选择 development, productionnone 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

会将 DefinePluginprocess.env.NODE_ENV 的值设置为 developmen或者production. 为模块和 chunk 启用有效的名。

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

development和production的区别

代码编译后的结果不同

development模式

development模式会把js内容放到eval里面执行,打包后的js文件内容如下:

eval的作用是动态执行js,这样可以方便动态更新里面的内容

复制代码
((__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开启内部插件,development没有

  • FlagDependencyUsagePlugin:编译时标记nodemodule依赖 unused harmony export ,用于 Tree shaking(移除没有使用到的代码)
  • FlagIncludedChunksPlugin 编译时候标记,移除chunks中没有使用到的代码(文件分割后输入的文件叫做chunk文件)
  • ModuleConcatenationPlugin:在webpack打包时,将bundle 内各个模块预编译到一个闭包中,提升代码在浏览器中的执行速度(相比之前的打包方式---每个模块都是一个闭包)
  • NoEmitOnErrorsPlugin:在编译出现错误时,跳过输出阶段。这样可以确保输出资源不会包含错误

实战

初始化npm项目

复制代码
npm init -y     

目录下生成了package.json 文件

安装webpack依赖

复制代码
npm i webpack weblack-cli -D

新建src/main.js,内容如下:

复制代码
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,内容如下:

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

执行命令:

复制代码
npx webpack ./src/mian.js ---mode=development

得到目录/.dist/main.js,内容如上面所述的development模式的内容

执行命令:

复制代码
npx webpack ./src/mian.js ---mode=production

得到目录/.dist/main.js,内容如上面所述的production模式的内容

输入内容为空

如果main.js文件内容如下

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

在production模式下输出文件内容为空,因为开启了FlagIncludedChunksPlugin模块,移除了没有被调用的代码

相关推荐
iphone1084 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
老坛00121 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00122 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾25 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐29 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价30 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花31 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101331 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树32 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜33 分钟前
跨平台UI自动化-Appium
前端