通过选择
development,production或none之中的一个，来设置mode参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为production。
会将 DefinePlugin 中 process.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模式的内容文章来源：https://www.toymoban.com/news/detail-775076.html
输入内容为空
如果main.js文件内容如下文章来源地址https://www.toymoban.com/news/detail-775076.html
var sum = (arr) => arr.reduce((pre, curr) => {
pre += curr;
return pre;
}, 0)
export default sum;
在production模式下输出文件内容为空，因为开启了FlagIncludedChunksPlugin模块，移除了没有被调用的代码
到了这里，关于webpack 5 mode的作用和区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
