前言

随着vite的诞生，webpack仿佛慢慢的被大家摈弃。前阵子我也用vue@3.x + vite@4.x开发了一个后盾管理系统，体验了一把，的确有被vite飞快的启动速度给惊艳到。

然而毕竟webpack曾经诞生了许久，也通过市场的一些考验，并且它有着丰盛的插件，丰盛的性能，一些大型的我的项目也应用过它，目前来说，它是一个绝对于vite来说更稳固的打包工具。

基于以下起因：

  • 有些公司因为历史起因，我的项目构建也是基于webpack，所以如果去到一些公司要做脚手架迁徙降级什么的，会应用webpack就显得非常有必要了。
  • 前端构建工具，应用步骤，思维根本差不多，因而学会webpack，对其余构建工具的学习也有帮忙

所以，思来想去，还是决定开个webpack的专栏，跟大家一起学习webpack怎么配置（尽管专栏开的有点晚了）。

本篇文章次要外围，是跟大家一起搞懂应用webpack时，波及到的几个概念，让咱们对webpack编译流程有个更好的了解。

webpack是什么

它就是一个打包工具：

  • 它能够把咱们源码中的es6+ js、less、sass、img、font等多个模块资源文件，通过一系列解决，编译出咱们浏览器能辨认并运行css、js、html等前端资源
  • 同时，它还提供很多可高度配置的性能（tree shaking、代码宰割、模块热替换）等，帮忙咱们更好的优化治理咱们的代码和资源

webpack.config.js

webpack在v4.0.0当前领有开箱即用的性能，即咱们装置了webpack、webpack-cli两个依赖当前，无需任何配置文件，就能够间接进行打包。这是因为：

  • webpack默认入口为：根目录/src/index.js
  • webpack默认输入编译后的文件及文件名为：根目录/dist/main.js

但咱们个别会在咱们的我的项目根目录新建一个名为webpack.config.js的配置文件。这样能够批示webpack如何解决咱们我的项目中的文件、资源等；通过更高度的自定义配置来满足咱们我的项目的需要。

咱们看看这个配置文件大略得框架是什么样，心里有个印象：

// webpack.config.jsmodule.exports = {    // 入口    entry: {},    // 打包输入    output: {},    // 配置模块如何解析    resolve: {},    // 配置各种loader    module: {},    // 配置插件    plugins: [],    // 优化（能够进行代码宰割）    optimization: {},    // webpack-dev-server 开发时的配置，个别用于development模式    devServer: {}};

webapck当然还反对很多配置项，只是咱们平时用到的个别就这几个，其余配置项能够看文档

留神

webpack配置文件，外面的代码轻易大家怎么玩，配置文件名字也不肯定肯定要为webpack.config.js，只有保障最初输入的是一个webpack配置的对象就能够了：

// myconfig.js// 各种逻辑代码......// 保障最初导出一个`webpack`配置的对象就能够module.exports = {    // 各种webpack配置    entry: {},    output: {},    ....}
"build": "webpack --config myconfig.js"

优化

所有配置都写在一个文件，这不利于咱们保护与开发；而且咱们开发我的项目时，会有多个环境（本地开发环境，测试环境，生产环境），所以咱们个别会有不同环境的配置文件，跟所有环境都通用的配置文件。
咱们个别会将"通用的配置文件"与“不同环境的配置文件”合并，最初再由webpack运行这个合并后的这个配置文件。

配置文件个别有：

  • 开发与生产环境通用的配置（webpack.common.js）
  • 开发环境配置（webpack.dev.js）
  • 生产环境配置（webpack.pro.js）
后续文章会教大家如何进行这种配置办法

entry

它指的是webpack开始解析，构建依赖图的终点。咱们个别用{key: value}对象的模式，来配置entry，例如：

module.exports = {    entry: {        index: './src/index.js',        share: './src/share.js',    },}

这示意：

  • 咱们我的项目中有两个入口index、share
  • webpack会从index、share两个入口开始构建它们相干依赖的模块，从而造成一个依赖图（前面会有更具体的解释）
  • 打包后会以key为打包后的文件名字

output

它非常好了解，它能够设置通过webpack打包后的编译文件的名称，及应该输入到哪个地位。

须要留神的是，即便咱们设置了多个entry的入口，然而只能指定一个 output 配置。

Module

咱们通过import或require进来的资源文件，或咱们我的项目中的每个文件，都能够看作为一个独立的模块。因而，它能够是js文件、css文件、也能够是图片等任何一种资源。所以咱们开发中常常会看到以下语句：

  • import 'index.css'
  • import A from './x.js'
  • import pic from './x.png'
  • ...

模块之间的组合又会造成一个Chunk。Chunk是一个很重要的概念，后文会具体讲。

参考文章：Modules

Loader

通过上文咱们晓得，我的项目中每个一个文件都能够看作是一个模块，又因为咱们的文件类型多种多样，因而咱们须要某个货色，它能够把这些模块解析成webpack可能辨认的无效模块，并将他们增加到依赖图中，这个货色就是Loader。

webpack也很贴心的给咱们提供了一个module的配置项，它专门用来配置不同的loader以至于解析不同的文件类型（模块）。这是因为webpack默认只能解析js和json文件，所以如果要解析不同的类型的文件（模块），咱们就要装置相应的loader：

// webpack.config.jsmodule.exports = {    ...,    modules: {        rules: [            // 解析.txt文件，应用raw-loader            { test: /.txt$/, use: 'raw-loader' },        ],    }}

loader有两个属性：

  • test 属性，辨认出哪些文件会被转换。
  • use 属性，定义出在进行转换时，应该应用哪个loader。

webpack中，还有哪些loader能够看这里

Plugin

Loader用于转化模块，Plugin则用来增强webpack打包编译时的性能。所以它个别有打包优化，资源管理，注入环境变量等性能。

因为webpack也很贴心的给咱们提供了一个plugin的配置项，咱们想加强什么性能，去plugin外面配置就好了，例如咱们在咱们我的项目中间接定义一些全局变量：

// webpack.config.jsmodule.exports = {    ...,    plugins: [         new webpack.DefinePlugin({            AUTHOR_NAME: JSON.stringify('Lee'),        })    ]}// index.jsconsole.log(AUTHOR_NAME); // Lee

webpack中，还有哪些plugin能够看这里

Dependency graph（依赖图）

当咱们一个文件依赖另一个文件时，webpack都会将文件视为间接存在“依赖关系”。

举个简略的例子，假如咱们有三个文件，它们的关系如下：

// main.jsimport './index.js';// index.jsimport 'plugin.js'console.log('I am from index.js');// plugin.jsconsole.log('I am plugin.js');

咱们来剖析一下：

  1. main.js、index.js、plugin.js相当于三个模块；
  2. 而后main.js引入了index.js，index.js又引入了plugin.js；
  3. 因而这三个文件都存在互相援用关系；
  4. 这时造成了这样一个有援用关系的图谱：main.js→index.js→plugin.js

总结：

webpack会以entry为终点，并把它作为依赖图的起始点；而后剖析解决entry外面外部的import，一直递归查问相似上述示例的依赖关系，这个过程最初会造成一个具备依赖关系的图谱，这个图谱就是“依赖图”。

webpack会依据这个依赖图，再进一步操作。

⭐️ Chunk

在咱们查阅webpack中文文档时，咱们常常会看到Chunk这个单词，它并没有被翻译成中文。这是因为Chunk是webpack打包过程中产生的一个逻辑概念，须要联合上下文能力了解出它的意思。

Chunk是webapck外面比拟重要的概念，如果咱们弄懂它，对webpack打包整个流程，代码宰割也会有很好的了解。

解释

在webpack打包过程中，会将一个或一组模块（咱们下面说到的webpack中的任何一个文件，都能够看作是一个模块）组合成一个整体，那么这个整体就能够当做一个Chunk。一般来说，webpack打包过程中，有几个Chunk，最初就会输入几个js文件。

咱们通过 learn-01 这个案例，外面是最简略的配置，最简略的代码，这样更好了解Chunk是什么。

咱们有三个js文件：

  • index.js：入口文件
  • async.js：用来异步引入的文件
  • vendors.js：能够把它当做某个第三方依赖文件

文件代码及webpack配置如下：

// webpack.config.jsmodule.exports = {    entry: {        index: './src/index.js'    },    output: {        filename: '[name]-bundle.js'    }}// index.jsimport './vendors';import(/* webpackChunkName: "async" */ './async');console.log('I am from index.js');// async.jsconsole.log('I am from async.js');// vendors.jsconsole.log('I am from vendors.js');

看到这，咱们能够先猜一下打包进去的文件有几个。如果猜对了，阐明大家对Chunk也有肯定理解了。

剖析

咱们先剖析一下打包后的文件及构造：

dist├── async-bundle.js└── index-bundle.js

一共输入了两个js文件。

通过上文，咱们晓得：

  • 每个文件都能够看成一个module（模块）
  • 在webpack打包过程中，会将一个或一组模块组合成一个整体，那么这个整体就能够当做一个Chunk

咱们接着剖析：

  • 通过查看dist/index-bundle.js文件，咱们会发现外面蕴含了非异步引入的js文件：入口文件index.js、vendors.js（还有一些webpack打包时，本人退出的代码 runtime）。这阐明index.js、vendors.js这两个模块组成了一个Chunk。这里咱们称它为chunk[initial]；
  • 通过查看dist/async-bundle.js文件，外面只蕴含了async.js的代码。这阐明异步引入的模块，会被独自分成一个Chunk。这里咱们把这个Chunk称为chunk[no-initial]
  • chunk[initial]与chunk[no-initial]都来自于同一个入口index.js，所以这两个Chunk组合起来，能够看成一个Chunk组，或者说入口文件会组成一个整体的Chunk组。咱们称它为Chunk[index]

好，置信到这里，大家应该对Chunk造成有个大抵印象了，咱们再来捋一下这个过程。

webpack编译时，通过咱们的配置：

  1. 会先找到enrty，有几个entry，就会以这些entry组成一个Chunk组（示例中的Chunk[index]）
  2. 再剖析这些Chunk组，将入口js及这个入口所有相干的依赖模块，组成一个chunk（示例中的chunk[initial]）
  3. 如果有异步引入的模块，则这个模块独自再组成一个Chunk（示例中的chunk[no-initial]）
  4. 最初打包输入chunk[initial]（index-bundle.js）、chunk[no-initial]（async-bundle.js）

上述示例，chunk、module（模块）的关系如下：

模式

通过上述剖析，咱们能够晓得，Chunk有两种模式：

  • initial：初始的。咱们的入口js及这个入口所有相干的依赖模块，组合成的一个汇合，能够看成一个Chunk。（即上文index.js、vendors.js组成的chunk[initial]）
  • non-initial：非初始的。阐明它是异步加载的模块，如果咱们在代码中用到了相似import('./A.js')的语句，这这个js会被独自分成一个异步的Chunk。（即上文async.js组成的chunk[no-initial]）

如何产生Chunk

  • 通过entry配置，产生一个以入口为整体的Chunk组（这个组不会被打包进去，只是会造成这个Chunk组）
  • 咱们的入口js及这个入口所有相干的依赖模块，产生initial Chunk
  • 通过异步import()，产生non-initial Chunk
  • 通过webpack弱小的代码宰割，产生其余chunk

通过下面的解释与剖析，心愿大家当前用webpack时，能够在脑海中有一个Chunk造成的大略过程，这对咱们应用代码宰割是非常有帮忙的。

参考文章：揭示外部原理

Bundle

Bundle指的是webpack打包后的所有产物。

如果咱们output配置打包后输入的文件目录是dist，咱们的Bundle就是dist文件夹外面的所有产物。

一般来说有几个Chunk，就会打包出多少个js bundle文件。

打包过程

浅析

为了大家更好的了解上文解析的概念，咱们浅析webpack的打包流程，看看上文的概念体现在哪些流程中。

咱们在终端运行webpack后，它会经验以下过程：

  1. 读取咱们指定的配置文件（webpack.config.js）
  2. 从入口entry开始，剖析咱们的Module（模块）并递归咱们整个我的项目模块间的依赖关系
  3. 加载相应的Loader，将这些Module（模块）解析成webpack可能辨认的无效模块，并它们退出到依赖图（Dependency graph）
  4. 编译过程会触发多个事件，执行配置的Plugin（插件）
  5. 将剖析好的模块进行分组，造成Chunk
  6. 依据配置文件（output），输入最初的Bundle

上述过程能够看作三个阶段：

  • 初始化阶段（过程1）
  • 编译阶段（过程2-过程5）
  • 输入阶段（过程6）

可总结为下图：

webpack理论打包的过程当然简单得多，这里为了更好的了解，简化了

体验

咱们从理论登程，通过 learn-02 这个案例，用理论代码再深刻体验了解一下webpack打包过程，跟波及到的概念。

咱们来看看 learn-02 我的项目构造：

learn-02├── index.html├── package-lock.json├── package.json├── project.config.js└── src    ├── assets    │   └── style.less    ├── index.js    ├── plugin    │   ├── common.js    │   ├── index-vendors.js    │   └── share-vendors.js    └── share.js

咱们来介绍一下相应的文件：

  • index.html：用来运行咱们打包后的文件，查看成果
  • project.config.js：webpack配置文件（为了区别webpack.config.js，专门另起一个名字）
  • style.less：款式
  • index.js：入口文件
  • share.js：入口文件
  • common.js：寄存专用办法，别离会被两个入口文件，援用两次
  • index-vendors.js：能够当做index.js的一些依赖
  • share-vendors.js：能够当做share.js的一些依赖

以下我的项目中的相干代码：

咱们看到project.config.js的配置后，当前一样能够猜猜打包后会输入几个文件。

好，当初咱们开始剖析：

1️ 当咱们在终端运行npm run build后，webpack会读取咱们指定的文件project.config.js

2️ 从entry开始，剖析咱们的模块。咱们的入口有两个index、share，所以这时会造成两个Chunk组：Chunk[index]、Chunk[share]，并且递归咱们模块相应的依赖关系。

3️ index.js引入了style.less，所以会加载相应的Loader，将它解析成webpack能辨认的无效模块，并将其退出到依赖图中。这时会造成两个依赖图：

  • 一个由入口index.js及其依赖组成的依赖图（index.js -> style.less，common.js、index-vendors.js）
  • 一个由入口share.js及其依赖组成的依赖图（share.js -> common.js、share-vendors.js）

4️ 而后将这些模块进行分组：

  • 入口index.js及其依赖组成的一个chunk[initial-index]；
  • 入口share.js及其依赖组成的chunk[initial-share]

5️ 发现咱们的配置中，还利用代码宰割把commonjs也独立宰割进去，因而它独立组成了一个chunk[initial-common]

6️ 至此，webpack曾经分出了三个chunk：

  • chunk[initial-index]
  • chunk[initial-share]
  • chunk[initial-common]

7️ 依据output最初输入Bundle

同样，理论打包过程必定要简单得多

最初

  • 这篇文章剖析解说了webpack外面波及到的一些概念，尤其是Chunk的常识比拟重要。了解了Chunk，大家肯定会对webpack有一个更好的了解。心愿读完这篇文章后，咱们在应用webpack时，脑海会有一个大抵的过程，跟分辨出大略有几个Chunk
  • 后续的文章会开始教大家怎么配置webpack，如果感兴趣的话能够关注一下这个专栏
  • 文章波及到的案例曾经上传到 github，十分欢送star、fork学习

最初的最初，如果大家感觉文章有帮忙到，创作不易，还请大家多点赞转发，如果有异同点，欢送评论探讨。