webpck深入浅出教程（一）

骑猪看日落 2023-06-29 07:28 8阅读 0赞

**本系列教程基于你已经对webpack有一定的了解，本教程是create-react-app，基于webpack eject的，如果你不知道webpack eject的，请先了解eject**。

「[webpack官网][webpack]」本质上，*webpack* 是一个现代 JavaScript 应用程序的*静态模块打包器(module bundler)*。当 webpack 处理应用程序时，它会递归地构建一个*依赖关系图(dependency graph)*，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 *bundle*。

虽然不想成为webpack配置工程师，但是基本的原理还是需要懂的,以下内容是webpack的一些基本知识，我觉得作为一名前端开发也是必须要掌握的。

## 一、初始化项目 ##

1.全局安装create-react-app

npm install -g create-react-app

2.创建项目

create-react-app webpack-eject-demo

3.eject配置（可选）

npm run eject

注意，此步骤不可逆，如果不是新项目，建议做好备份！！！

此时项目目录下多出了scripts和config两个文件夹，scripts文件夹中是start、build和test三个文件，

## 二、webpack的基本概念 ##

1、entry（\*）

指定一个入口起点（或多个入口起点）。默认值为 `./src`

2、output（\*）

指定创建的 *bundles*，以及如何命名这些文件，默认值为 `./dist`

3、loader（\*\*\*）

处理非js文件。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

webpack 的配置中 **loader** 有两个目标：

`（1）test` 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

`（2）use` 属性，表示进行转换时，应该使用哪个 loader。

定义在module.rules中

以上代码含义是webpack 编译器在「在 `require()`/`import` 语句中被解析为 '.txt' 的路径」时，对它打包之前，先**用** `raw-loader` 转换。

如果有多个loader，调用顺序是逆向的，即按照定义顺序从后往前调用。

module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: true
                }
              }
            ]
          }
        ]
      }

以上代码会优先调用css-loader，然后再调用style-loader。

如果对loader想了解更多，移步[官网][Link 1]

4、plugin（\*\*\*）

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

webpack **插件**是一个具有 [`apply`][apply] 属性的 JavaScript 对象。`apply` 属性会被 webpack compiler 调用，并且 compiler 对象可在**整个**编译生命周期访问。

通过require引入一个插件，在plugins中new一个插件即可。

html-webpack-plugin的作用主要有两个：

（1）为html文件中引入的外部资源如`script`、`link`动态添加每次compile后的hash，防止引用缓存的外部文件问题

（2）可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置**N**个`html-webpack-plugin`可以生成**N**个页面入口

如果想对plugin了解更多，移步[官网][Link 2]

5.Module

模块，配置处理模块的规则。在 Webpack 里一切皆模块，一个模块对应一个文件；Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

6.Resolve

配置寻找模块的规则。

7.Chunk

代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

## 三、webpack工作流程 (加载 - 编译 - 输出) ##

1.初始化。 从webpck的配置文件(webpack.config.js或其它)中读取配置信息，或者从shell脚本的输入参数中读取配置信息，初始化本次的执行环节。

2.加载插件，准备编译。 根据配置信息，加载本次执行所需要的所有相关插件。

3.读取入口文件。 根据配置信息的entry属性依次读取要编译入的文件。

4.编译。 对第3步中读取到的入口文件内容进行编译，根据配置信息匹配相对于的Loader进行编译，同时递归地对该文件所依赖的的文件/资源匹配相对于的Loader进行编译。

5.完成编译。 第四步中，得到每个模块被编译后的内容，以及模块之间的依赖关系。

6.准备输出。 根据第5步中的编译内容和模块的依赖关系，将每一个主入口文件和其所依赖的所有模块组成一个chunk，根据配置的entry得到一个chunk列表。

7.输出到文件。 根据第6步的结果结合webpack配置信息中的output参数按照指定的格式，对每一个输出chunk进行命名，chunk内容转换(主要是指输出的模块类型，比如指定输出amd,umd等)并输出到指定的路径中。

四、参考内容

1、[webpack详解][webpack 1]

2、[Webpack 4 配置最佳实践][Webpack 4]

[webpack]: https://www.webpackjs.com/concepts/
[Link 1]: https://www.webpackjs.com/concepts/loaders/
[apply]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
[Link 2]: https://www.webpackjs.com/concepts/plugins/
[webpack 1]: https://juejin.im/post/5aa3d2056fb9a028c36868aa
[Webpack 4]: https://juejin.im/post/5b304f1f51882574c72f19b0