Webpack4 中 mode 的使用详解
在前端开发中，我们经常需要使用 webpack 这个打包工具，而 webpack 4.x 版本中新增了一个 mode 选项，可以让我们更方便地控制打包过程，提高开发效率。本文就来详细介绍一下 webpack 4 中 mode 的使用。
mode 的作用
webpack 4 中 mode 有三种可选值：development、production 和 none。它们分别对应着不同的打包模式，用于指定 webpack 打包的模式，默认值是 production。
development 模式下，webpack 会开启如下特性：
- 配置 process.env.NODE_ENV 的值为 development。
- 开启 NamedChunksPlugin 和 NamedModulesPlugin，用于提高调试信息的可读性。
- 开启缓存（cache），提升构建速度。
- 开启 devtool 选项（默认是 eval），方便调试。
production 模式下，webpack 会启用一系列针对生产环境的优化，如：
- 配置 process.env.NODE_ENV 的值为 production。
- 开启 UglifyJsPlugin，用于压缩 JavaScript 代码。
- 开启 Scope Hoisting，提升代码运行速度。
- 开启 Tree Shaking，去除无用代码。
none 模式下，webpack 不做任何特殊处理，适用于一些特殊场景下的打包需求。
mode 的使用方法
mode 的使用方法非常简单，只需要在 webpack 配置文件中添加 mode 选项即可。例如，我们要配置一个在开发环境下的 webpack，可以这样写：
module.exports = {
mode: 'development', // 配置 mode 为 development
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
};当我们执行 webpack 命令进行打包时，webpack 会自动根据 mode 的值进行相应的处理。
示例代码
为了更好地理解 mode 的作用，这里编写一个简单的示例代码。
我们可以在一个新建的项目中添加如下目录和文件：
- src/index.js // 入口文件 - src/math.js // 自定义模块，用于加、减、乘、除操作 - dist // 打包后的文件目录 - package.json - webpack.config.js
其中，math.js 文件内容如下：
export const add = (a, b) => a + b; export const minus = (a, b) => a - b; export const multiply = (a, b) => a * b; export const divide = (a, b) => a / b;
index.js 文件内容如下：
import { add, multiply } from './math.js';
console.log(add(1, 2)); // 打印结果：3
console.log(multiply(3, 4)); // 打印结果：12webpack.config.js 文件内容如下：
// javascriptcn.com 代码示例
const path = require('path');
module.exports = {
mode: 'none', // 配置 mode 为 none
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};我们先执行 webpack 命令进行打包，使用 webpack -w 命令可以实现自动打包：
$ webpack -w
此时生成的 bundle.js 文件内容如下：
(()=>{"use strict";console.log(3),console.log(12)})();这里可以看到，webpack 对代码进行了压缩优化。
接下来我们将 webpack.config.js 中的 mode 配置为 development，重新执行 webpack 构建命令：
$ webpack -w
此时生成的 bundle.js 文件内容如下：
(()=>{"use strict";
console.log(3);
console.log(12);
})()这里可以看到，webpack 已经自动开启了热更新、缓存、方便调试等特性。
最后我们将 webpack.config.js 中的 mode 配置为 production，重新执行 webpack 构建命令：
$ webpack
此时生成的 bundle.js 文件内容如下：
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==(typeof Symbol&&Symbol.toStringTag)&&(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n}(e,r(1),r(1)).default|>console.log,r(0)();
}([function(e,t,r){"use strict";r.r(t);r(1);var n=r(2),o=r(3);console.log(Object(n.add)(1,2)),console.log(Object(o.default)(3,4))},function(e,t,r){},function(e,t,r){"use strict";r.r(t);r.d(t,"add",(function(){return n})),r.d(t,"minus",(function(){return o})),r.d(t,"multiply",(function(){return c})),r.d(t,"divide",(function(){return a}));const n=(e,t)=>e+t,o=(e,t)=>e-t,c=(e,t)=>e*t,a=(e,t)=>e/t},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r(2);console.log(Object(n.add)(1,2)),console.log(Object(o.default)(3,4))},function(e,t,r){"use strict";r.r(t);var n=r(4);document.write(Object(n.sayHello)("Webpack"));r(0)},{4:function(e,t){function r(e){return"Hello, "+e+"! "}e.exports={sayHello:r}}]);这里可以看到，webpack 对代码进行了 Tree Shaking 去除了无用的代码，并开启了 Scope Hoisting 优化。
总结
通过对 mode 的使用详解，我们可以发现，在不同的场景下选择不同的 mode 值，能够帮助我们更好地开发、部署应用，提高应用的性能，同时也提高了我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f6d637d4982a6eb8fc67f