webpack4.x的变化（二）

我以前写过一篇文章webpack4带来了什么，这篇文章优势照猫画虎的意思，文章中说明了一些什么，但好像是尚未说透，感受不是那么好，因此下定决心，在写一篇，可能这一篇也有不足，但后续还会继续补充。话很少说，下面进入正文。

webpack4.x提出的一个口号是实现0配置，也就是说，咱们不用添加配置文件webpack.config.js，就能够实现构建打包的目的。由于，webpack4.x以前的版本，由于要实现构建就须要本身手动来添加配置文件，不论是大型应用，仍是小应用，这一点增长了使用的复杂度，同时也让学习曲线变得更加陡峭。因此webpack4.x的出现就像一道清流，受人追捧，但同时也带来了一些问题，最主要的就是迁移和使用习惯的变化。

webpack4.x的mode选项和optimization插件

webpack4.x以前，咱们须要本身配置mode（mode有三个选项值，development、production和none），而后针对性的配置相应的配置文件。webpack4.x中的mode的出现，可让咱们没有省去一些没必要要的配置（如何要实现精细化的控制，仍是须要自定义配置文件）。很明显，webpack4.x让咱们省去了一些配置，那么为了更好的使用webpack4.x，便于之后的扩展，或者实现细粒度的控制，你就须要了解不一样的mode。

mode: development

也就是以前，咱们要本身配置的开发模式，省去了webpack.config.dev.js配置文件。

新特性：

• 方便于浏览器调试的工具；
• 能够快速的对增长的内容进行编译；
• 提供了更精确、更有用的运行时错误提示机制

功能：

• 不用设置npm脚本命令中 webpack --env development ，webapck会自动将 development 传递给 process.env.NODE_ENV 。固然，这里咱们使用的时mode选项，咱们能够在npm脚本命令为 "dev": "webpack --mode development" ，也能够命令行中输入 webpack --mode development（注意：windows安装webapck-cli注意路径问题）；
• 它启用了 NamedChunksPlugin 和 NamedModulesPlugin 两个插件。这两个插件时webapck的内置插件，在 webpack lib目录 下能够找到。它的做用就是给全部的模块（源文件）和块（构建输出文件）定义一个名字。

注：在webpack中，若是要使用webpack的内置插件，须要const webapck = require('webpack') 这样先引入webapck，而后像 webapck.HotModuleReplacementPlugin() 这样，启用启用内置的热替换插件。而webapck内置插件中有一类优化插件会常常用到，咱们能够 webpack.optimize.uglifyjsplugin()(这个插件在webapck4.x中移除了)。

mode: production

也就是以前，咱们要本身配置的开发模式，省去了webpack.config.pro.js配置文件。

新特性：

• 自动压缩构建输出的文件
• 快速的运行时处理
• 不暴露源代码和源文件的路径
• 快速的静态资源输出

功能：

• 不用设置npm脚本命令中 webpack --env production ，webapck会自动将 production 传递给 process.env.NODE_ENV 。固然，这里咱们使用的时mode选项，咱们能够在npm脚本命令为 "dev": "webpack --mode production" ，也能够命令行中输入 webpack --mode production。
• 它启用了 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin,它们是内置插件，还启用了 TerserPlugin 这个插件（它不是webapck内置插件）。

优化类的插件：

FlagIncludedChunksPlugin: 检测并标记模块之间的从属关系。
ModuleConcatenationPlugin: 可让webpack根据模块间的关系依赖图中，将全部的模块链接成一个模块。
SideEffectsFlagPlugin: 告诉webapck去清除一个大的模块文件中的未使用的代码，这个大的文件模块能够是自定义的，也能够是第三方的（注意：必定要`package.json`文件中添加`"sideEffects": false`）。
OccurrenceOrderPlugin: 告诉webapck各个模块间的前后顺序，这样能够实现最优的构建输出。
TerserPlugin: 它替代了uglifyjs-webpack-plugin插件。它的做用依然是对构建输出的代码进行压缩。

mode: none

这种模式下，webpack不作任何优化处理（相较于development和production模式）。webapck4.x全部内置的优化插件。

优化类的内置插件有哪些呢？你能够参考 webpack 的optmize目录

从上面的描述能够看出，webapck4.x的特色就是：上手简单，构建速度快，良好的开发体验。

webpack4.x的devtool

它主要使用在development模式下，但也能够做用于production模式下。

development:

默认的配置值是eval，它的速度快，但效果很差，也能够考虑使用 cheap-eval-source-map 或 cheap-module-eval-source-map。

production:

可使用source-map或者cheap-source-map

webpack4.x的loader和plugin

因为webpack4.x的新特性和新功能，使它造成了新的loader和plugin生态系统。

loader

webpack4.x移除了 this.options ，这个在loader中常用的上下文，若是要使用this.options.context，如今能够经过this.rootContext。

this.hot 被添加到了loader的上下文中，因此咱们能够给指定的代码启动HMR功能。

一样如今能够将AST传递给loader，而不会出现原来的双重解析问题。

plugin

webpack4.x的插件生态系统变化较大，有兴趣的可参考tapable。

参考资料

• webpack 官方文档
• webpack 4: mode and optimization
• webpack 4: migration guide for plugins/loaders