内容简介: mode(模式)是webpack4.0.0新增的配置,用来指定webpack使用对应模式的内置优化;它有三个可选模式:production、development、none;默认为production。下面通过一段代码分别演示一个每一个模式打包输出的文件内容:
简介
mode(模式)是webpack4.0.0新增的配置,用来指定webpack使用对应模式的内置优化;它有三个可选模式:production、development、none;默认为production。
选项 | 描述 |
---|---|
development | 通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 |
production | 通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin. |
none | 通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 node。使用默认的优化项。 |
演示
下面通过一段代码分别演示一个每一个模式打包输出的文件内容: 源码地址
第一步:编写入口文件和依赖代码
// webpack@4.32.2系列教程/demo02-mode/src/role.js export default class Role { constructor(name, skill) { this.name = name; this.skill = skill; } }
// webpack@4.32.2系列教程/demo02-mode/src/index.js import Role from './role' const role = new Role('乔峰', '降龙十八掌'); console.log(role); console.log('process.env.NODE_ENV: ', process.env.NODE_ENV);
第二步:编写webpack配置 & 启动webpack
// webpack@4.32.2系列教程/demo02-mode/scripts/build.js const webpack = require('webpack'); // 创建编译器对象 const compiler = webpack({ // mode模式:webpack4.0.0新增配置,用来指定webpack使用相应模式的内置优化。 // mode: 'development' // 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 // mode: 'production' // 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. mode: 'none' // 使用默认优化项 }); // 启动webpack compiler.run((err, stats) => { if (err) { console.error(err); return; } // 输出编译成功信息 console.log(stats.toString({ colors: true })); });
第三步:cd到demo02-mode文件夹下,运行node scripts/build.js
mode: none 打包输出的main.js文件内容
mode:development 打包输出的main.js文件内容
mode:production 打包输出的main.js文件内容
小结:可以看到每一种模式,打包后输出的代码都不一样,我们平时开发使用development模式,当代码需要发布上线时使用production模式。
注意:上面说的process.env.NODE_ENV并不是Node.js的process.env.NODE_ENV运行环境变量,它其实是通过DefinePlugin插件设置的一个webpack全局变量。
配置
mode其实可以理解为webpack4.0.0 提供一个语法糖,它的三个可选项,其实就是三套不同的webpack默认配置而已,以下是每一种模式对应的webpack配置:
mode: development
mode: production
mode: none
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 立体字母建模教程【C4D教程】
- PS学习教程 PS制作字体发光效果教程
- 【C4D教程】卡通风可爱小乌龟建模教程
- 卡通风仙人掌建模教程【C4D教程】
- 3D立体字体制作教程,C4D建模教程
- 3D小乌龟制作教程,C4D建模教程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
嵌入式Linux应用开发完全手册
韦东山 主编 / 人民邮电出版社 / 2008-8 / 69.00元
本书全部实例代码及相关工具。 基于ARM 9+Linux 206平台,从基础讲起,引导读者快速入门,实例丰富,可直接应用于工程实践。 本书全面介绍了嵌入式Linux系统开发过程中,从底层系统支持到上层GUI应用的方方面面,内容涵盖Linux操作系统的安装及相关工具的使用、配置,嵌入式编程所需要的基础知识(交叉编译工具的选项设置、Makefile语法、ARM汇编指令等),硬件部件的使用及......一起来看看 《嵌入式Linux应用开发完全手册》 这本书的介绍吧!