陌上寒

陌上寒个人博客

webpack4.x 准备起飞

《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.x 准备起飞》
参考链接
webpack4新特性介绍
webpack中文文档
webpack中文网
webpack4升级指北
webpack4升级完全指南
webpack4升级指南以及从webpack3.x迁移