《Webpack+Babel入门与实例详解》

Webpack+Babel入门与实例详解

姜瑞涛

36个笔记（微信读书只能试读前两章，第三章开始笔记是自己手敲的）

第1章 Webpack入门

执行如下命令，该命令是Webpack 5的命令行打包命令。[插图]上面命令的作用：从a.js文件开始，按照模块引入的顺序把所有代码打包到一个JS文件里，这个文件的默认名称是main.js。Webpack会自动处理打包后代码的顺序与依赖关系。–entry用来指定打包入口文件，-o是out的意思，表示输出目录，这里使用dist目录作为打包后的输出目录。注意，webpack是打包命令，后面的内容是打包参数。

Webpack的打包模式共有三种：production、development和none，这三种模式是通过mode参数来指定的。production和development这两种模式会分别按照线上生产环境和本地开发环境进行一些优化处理，而none模式会保留原始的打包结果。例如，production模式是给生产环境打包使用的，打包后的bundle.js文件代码是压缩后的

在使用resolve方法的时候，我们使用了__dirname。__dirname是Node.js的一个全局变量，表示当前文件的路径。这样，path.resolve（__dirname，’’）表示的其实就是当前文件夹根目录的绝对路径。

要对某种模块进行处理，我们需要为配置项新增module项。该项是一个对象，其rules里是我们对各个类型文件的处理规则配置。

1）test：取值是一个正则表达式，表示的含义是当文件名后缀是.css的时候，我们使用对应use项里的预处理器。2）use：取值是一个数组，数组每一项是一个预处理器。预处理器的执行顺序是从后向前执行，先执行css-loader，然后把css-loader的执行结果交给style-loader执行。

第2章 Webpack资源入口与出口

ES6的模块化语法主要有export模块导出、import模块导入，以及import()函数动态加载模块。

export还可以导出模块的默认值，方便在导入的时候使用。[插图]

我们使用import…from’…’方式导入模块。如果导入的模块有默认值，我们可以自定义一个变量代表其默认值。[插图]对于导入模块的其他非默认值，我们可以使用大括号方式导入。[插图]除了使用import…from’…’方式导入模块，也可以使用import’…’方式。使用后者时，导入模块后会执行模块内容，但是并不使用其对外提供的接口。

import()函数可以用来动态导入模块，它是在ES2020提案里提出的。

需要注意的是，import()函数与import…from’…’方式除了外观形式上有所区别，import()函数导入模块是动态的，而import…from’…’方式是通过静态分析导入的。

下面简单解释一下import()函数的原理。Webpack在打包的时候，碰到import()函数导入的模块并不会立刻把该模块内容打包到当前文件中。Webpack会使用动态生成JS的方式，在运行代码的时候生成script标签，script标签引入的就是import()里导入的内容。import()函数导入模块后会返回一个Promise对象，我们可以通过import().then()的方式来处理后续的异步工作。

CommonJS主要使用module.exports导出模块，使用require（’…’）导入模块。

章末总结，很好的写作方式！

本节介绍了与JS模块化相关的内容，知识点总结如下。

本节介绍了与JS模块化相关的内容，知识点总结如下。1）Webpack支持ES6 Module、CommonJS和AMD等模块化规范，目前常用的是ES6 Module和CommonJS。2）ES6 Module通过export导出模块，通过import…from’…’或import’…’导入模块。3）CommonJS通过module.exports导出模块，通过require（’…’）导入模块。4）ES6 Module通过import()函数动态导入模块，CommonJS通过require.ensure动态导入模块，推荐使用import()函数动态导入模块。

context在Webpack中表示资源入口entry是以哪个目录为起点的。context的值是一个字符串，表示一个绝对路径。

Webpack资源入口entry需要使用相对路径来表示。目前我们使用的entry都是字符串形式的，其实它还可以是数组形式、对象形式、函数形式和描述符形式的。

2.入口entry是数组形式表示数组的最后一个文件是资源的入口文件，数组的其余文件会被预先构建到入口文件中。

3.入口entry是对象形式对象形式的entry又被称为多入口配置。之前我们讲的都是单入口配置，就是打包后生成一个JS文件。多入口配置就是打包后生成多个JS文件。

上面的配置分别从两个入口文件打包，每个入口文件各自寻找自己依赖的文件模块并打包成一个JS文件，最终得到两个JS文件。

4.入口entry是函数形式函数形式的entry，Webpack取函数返回值作为入口配置，返回值是上述三种形式之一即可。函数形式的entry可以用来做一些额外的逻辑处理，不过在自己搭脚手架时很少使用。

5.入口entry是描述符（descriptor）形式这种入口形式也是一个对象，我们称之为描述符。描述符语法可以用来给入口传入额外的选项，例如设置dependOn选项时，可以与另一个入口chunk共享模块。

context是一个绝对路径，是基础目录的意思。entry是一个相对路径，它与context拼接起来，就是Webpack打包的入口文件了。

filename除了可以是一个文件名称，也可以是一个相对地址，如’./js/bundle.js’。最终打包输出的文件地址是path绝对路径与filename拼接后的地址。filename支持类似变量的方式生成动态文件名，如[hash]-bundle.js，其中方括号代表占位符，里面的hash表示特定的动态值。

[name]表示的是chunk的名字，简单理解的话，在打包过程中，一个资源入口依赖的模块集合代表一个chunk，一个异步模块依赖的模块集合也代表一个chunk，另外代码拆分也会有单独的chunk生成，我们将在第7章进行具体讲解。[id]是Webpack在打包过程中为每个chunk生成的唯一序号。

其中字符串形式和数组形式entry的output.filename的[name]值都是main。对于entry是对象形式的多入口配置，[name]是对象的属性名，对应每一个入口文件。

我们在开发时，一般会用webpack-dev-server开启一个本地服务器，这个服务器可以自动刷新和热加载等，它生成的文件存放在内存中而不是在电脑磁盘中。对于该内存中的文件路径，我们会用Webpack配置文件的devServer配置项的publicPath表示，它虚拟映射了电脑磁盘路径。

资源输出位置表示的是本次打包完成后，资源存放在磁盘中的位置。资源存放到磁盘后，浏览器如何知道该资源存放在什么位置呢？这个时候需要我们指定该资源的访问路径，这个访问路径就是用output.publicPath来表示的。在Web开发时，配置项output.publicPath的默认值是auto，表示资源调用者与被调用者在同一目录下。

在把publicPath设置为’assets/‘这类路径时，它是相对于当前HTML页面路径取值的。

output.publicPath的值有函数与字符串两种形式，通常我们使用字符串形式的值。在使用字符串形式的值时，Webpack 5官方文档中主要提供了五种形式的值，分别是相对URL（relative URL）、相对服务器地址（server-relative）、绝对HTTP协议地址（protocol-absolute）、相对HTTP协议地址（protocol-relative）和auto。

1.相对URL前面讲解的例子里的”js/“（或”./js/“）就属于这种形式的值，它是相对于当前浏览的HTML页面路径取值的。output.publicPath的值以”./“、’js/‘或”../“等开头，表示要访问的资源以当前页面URL作为基础路径。

2.相对服务器地址output.publicPath的值以”/“开头，表示要访问的资源以当前页面的服务器地址根目录作为基础路径。

3.绝对HTTP协议地址output.publicPath的值以HTTP协议名称开始，代表绝对HTTP协议地址，一般在使用CDN或对象存储的时候，我们会采用这种方式。现代前端工程中很大一部分静态资源都是通过CDN进行访问的。Web中常见的协议名称有HTTP和HTTPS，例如我的网站（见链接16）的协议名称就是HTTPS。下面看一下output.publicPath的值以协议名称开始的例子，在以协议名称开始的publicPath中，资源的访问地址是publicPath代表的绝对路径加上资源名称。

4.相对HTTP协议地址相对HTTP协议地址以//开头，与绝对HTTP协议地址相比，它省略了前面的https:或http:。在使用相对HTTP协议地址的时候，浏览器会将当前页面使用的协议名称与相对协议地址拼接，这样本质上与使用绝对HTTP协议地址是一样的。

在Webpack里，我们通常用[hash：8]表示取hash值的前八位，例如在Webpack配置文件中，我们用filename：’jQuery-[hash：8].js’来定义文件名。

首先，fullhash与hash是一样的，fullhash是Webpack 5提出的，它用来替代之前的hash。另外，hash、chunkhash和contenthash这三者都是根据文件内容计算出的hash值，只是它们计算的文件不一样。hash是根据打包中的所有文件计算出的hash值。在一次打包中，所有资源出口文件的filename获得的[hash]都是一样的。chunkhash是根据打包过程中当前chunk计算出的hash值。如果Webpack配置是多入口配置，那么通常会生成多个chunk，每个chunk对应的资源出口文件的filename获得的[chunkhash]是不一样的。这样可以保证打包后每一个JS文件名都不一样（这么说不太严谨，但有助于理解）。

contenthash有点像chunkhash，是根据打包时的内容计算出的hash值。在使用提取CSS文件的插件的时候，我们一般使用contenthash。

微信读书

第3章 Webpack预处理器

预处理器本上是是一个函数，它接收一个资源模块，然后将其处理成 Webpack 能使用的形式。

在 Webpack 中，一切皆模块。Webpack 在进行打包的时候，会把所有引入的资源文件都当做模块来处理。

如果 exclude 与 include 同时存在，Webpack 会优先使用 exclude 的配置。