webpack@4.32.2研究笔记【02】- mode

newtrek 发布于2019-08-23 17:51 / 2190人阅读

摘要：简介模式是新增的配置，用来指定使用对应模式的内置优化它有三个可选模式默认为。源码地址选项描述通过插件将的值设为。启用和通过插件将的值设为。使用默认的优化项。注意上面说的并不是的运行环境变量，它其实是通过插件设置的一个全局变量。

简介

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

混合云专线服务 02vps python 02 v02 Item02

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104243.html

webpack@4.32.2研究笔记【03】- devtool

摘要：简介选项用于控制是否需要生成，以及如何生成。表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加文件名，并使用执行。通过来处理已有的。优点是不需要建立和部署内网的服务器，缺点是无法直接线上源码。简介 devtool选项用于控制是否需要生成source map，以及如何生成source map。源码地址什么是source map？ source ma...

wangtdgoodluck 2019-08-23 18:01 评论0 收藏0
webpack@4.32.2研究笔记【01】- 零配置

摘要：核心概念是一个前端资源模块打包工具，它可以根据模块的依赖关系进行打包输出成浏览器能够识别的静态资源，可以把多个文件打包成一个，减少请求。源码地址零配置启动从开始，可以零配置启动，命令被迁移到一个单独的包上，的功能变得更加丰富强大。核心概念 webpack是一个前端资源模块打包工具，它可以根据模块的依赖关系进行打包输出成浏览器能够识别的静态资源，可以把多个文件打包成一...

littleGrow 2019-08-26 13:56 评论0 收藏0
linux下vi使用笔记

摘要：按屏幕往后移动半页。按移动到光标所在行的行首按光标跳到下个字的开头按光标跳到下个字的字尾按光标回到上个字的开头按光标移到该行的第个位置，如。例如，，表示移动光标至文章的第行行首。 01：查找和替换例1：要找about字符串 /about 在命令行输入/后接要查找的字符串，下一个匹配按n(ext)，上一个是N?about 在当前位置找，n跳到前一个匹配/about$ 匹配行尾的a...

Awbeci 2019-06-28 10:28 评论0 收藏0
读“js高程”笔记一

showImg(http://img3.douban.com/lpic/s8958650.jpg); 0x00 javascript组成 ECMAScript(-265)核心语言部分 DOM文档对象模型（DOM1、2、3） BOM浏览器对象模型(提供与浏览器交互的接口和方法) 0x01 async 异步加载执行顺序不定 charset defer 延迟加载，立即下载脚本但不执行 src ...

CollinPeng 2019-08-22 11:00 评论0 收藏0