首页 > 网络编程 > JavaScript > javascript技巧 > webpack 5 mode

webpack 5 mode的作用和区别解析

2024-01-08 10:23:54 作者：陆康永

Webpack 5 是一款强大的模块打包工具,可用于将许多分散的模块按照依赖关系打包成一个（或多个）bundle,这篇文章给大家介绍webpack 5 mode的作用和区别解析,感兴趣的朋友跟随小编一起看看吧

webpack 5 mode的作用和区别

通过选择 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模式的内容

输入内容为空

如果main.js文件内容如下

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

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

补充：

Webpack5开发模式选择

Webpack 5 是一款强大的模块打包工具，可用于将许多分散的模块按照依赖关系打包成一个（或多个）bundle。在Webpack 5中，主要有两种开发模式，分别是开发模式（development）和生产模式（production）。这两种模式主要的区别和各自的作用如下：

1.开发模式（development）：这种模式主要是为了提升开发过程中的体验，做了一些优化。如：

开启了模块热替换（HMR）：应用程序运行过程中替换、添加或删除模块，无需完全刷新页面。
优化了构建速度：使用了更快的内存中的编译和评估。
提供了更详细的错误和警告信息：帮助开发者更好地理解和解决问题。
编译后的代码不会被压缩，便于调试和分析。

2.生产模式（production）：这种模式主要是为了优化打包后的代码，提升运行效率。如：

自动删除未引用代码（tree shaking）：只打包实际需要的代码，减小bundle的大小。
自动进行代码压缩：通过UglifyJS或者Terser等工具，将代码中的空格、换行等无用字符删除，变量名简化等，以减小bundle的大小。
自动设置process.env.NODE_ENV为production，让一些库如React等在生产环境下运行更优化的代码。

记住，你可以通过在webpack的配置文件中设置mode字段为development或production来选择使用哪种模式。默认情况下，mode的值为production。

到此这篇关于webpack 5 mode的作用和区别的文章就介绍到这了,更多相关webpack 5 mode内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

webpack 5 mode的作用和区别解析