webpack4.x 准备起飞

昨天

我们通过8天时间讨论了关于javascript原型相关知识的讨论，到此，原型就先告一段落，
如果对我们之前的文章有疑问

• 可以翻看之前的文章
• 可以公众号留言/后台留言
• 博客留言
• 加我微信留言

欢迎交流，欢迎讨论，大家共同提高。
从今天开始，我们将要开启新的篇章

今天

webpack4在2018-02-25发布了webpackV4.0.0第一个4.x正式版，截止到今天2018-11-10 ，已经更新到v4.25.1，更新速度还是很快的

何为webpack

webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins，它可以改变、压缩和优化各种各样的文件。它的输入是不同的资源，比如：js、css、图片、字体和html文件等等，然后将它们输出成浏览器可以正常解析的文件。

在接下来的几天里，我们大致围绕以下几点进行讨论交流

Entry

entry输入，，配置模块入口webpack 执行构建的第一步从entry开始，更据entry的配置，递归解析出所有相关模块。

Output

Output输出，webpack经过一系列的处理，再经过output配置，出最终想要的代码

Module

mudule模块，在webpack里 一切皆是模块，一个模块对应一个文件，一个vue文件是一个模块，一个css是一个模块，一个图片是一个模块……
webpack会从配置的entry中开始递归找出所有依赖的模块
项目中，不同的模块有不同的处理，规则，规则的处理定制就只module中

Resolve

Resolve解析，webpack在启动后会从配置入口的模块出发找出所有依赖的模块，resolve在其中发挥的作用就是告诉webpack如何查找文件，虽然webpack有内置的解析功能，但是resolve支持我们自定义查找规则

Chunk

chunk代码块，一个chunk由多个模块组合而成，用于代码合并和分割

Loader

loader模块转换器，loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 Javascript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

Plugin

loader 被用于转换某些类型的模块，而plugin插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

Devserver

devServer 能够用于快速开发应用程序。

devServer提供了一下配置使我们可以对devServer进行定制化修改，devServer的配置参数有的甚至可以通过命令行cli传入，大大提高了开发效率。
只有通过devServer启动webpack时，devServer的配置项才会生效，webpack本身并不认识devServer配置。

Externals

externals外部扩展，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
例如，从 CDN 引入 jQuery，而不是把它打包：
index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

就是说jQuery是从CDN引入的，不需要打包到output中。

Devtool

devtool,此选项控制是否生成，以及如何生成 source map。默认值为false，即不生成source map

module.exports = {
  devtool: 'source-map'
};

配置的选择项目有点多，具体配置参见官网

Mode （4.x新增）

mode 模式，是4.x新增属性，属性值有两个，可以是 development 或 production。
development：

• 浏览器调试工具
• 注释、开发阶段的详细错误日志和提示
• 快速和优化的增量构建机制

production：

• 开启所有的优化代码
• 更小的bundle大小
• 去除掉只在开发阶段运行的代码
• Scope hoisting和Tree-shaking

如果你给mode设置为none，所有默认配置都去掉了，会抛警告⚠️
可以在配置中添加

module.exports = {
  mode: 'production'
};

也可以在cli中添加

webpack --mode=production

optimization（4.x新增）

从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分。我们后面详细讨论

除此以外

我们还可以讨论一些常用的plugin和loader。稍后我会将测试代码上传github，如果感兴趣，请持续关注

福利

额外整理了一套关于nodejs的视频教程，公众号后台回复“node教程二”即可领取

参考链接
webpack4新特性介绍
webpack中文文档
webpack中文网
webpack4升级指北
webpack4升级完全指南
webpack4升级指南以及从webpack3.x迁移