webpack的学习笔记(四)(配置相关)

_Gerry_

已于 2024-05-29 16:01:05 修改

阅读量734

点赞数 19

文章标签： webpack 学习笔记

于 2024-05-29 15:58:49 首次发布

本文链接：https://blog.csdn.net/weixin_42770320/article/details/139297953

版权

今天主要是来分享一下关于webpack的配置文件，devtool配置，编译过程，入口和出口等概念。

配置文件

webpack提供了的cli有很多的参数，但很多时候配置项太多的话使用cli参数是不方便的，所以采用配置文件的一种形式。

默认情况下，webpack会读取webpack.config.js文件作为配置文件，但也可以通过CLI参数--config来指定某个配置文件

配置文件中通过CommonJS模块导出一个对象，对象中的各种属性对应不同的webpack配置

Tips:配置文件中的代码，必须是有效的node代码

基本配置

mode

传递一个字符串，mode可以指定webpack的一个环境，development是开发环境，production是生产环境

entry

传递一个字符串，entry可以指定webpack的入口文件路径

output

传递一个对象，output是用来执行打包后输出结果的

这里可能会出一些相关面试题

面试题:

webpack的配置文件可以使用es module的语法吗？

webpack的配置文件为什么只能使用common js语法？

因为webpack的配置文件是在打包阶段的，它会参与运行，运行的时候在nodejs的环境，nodejs只能支持commonjs的环境，而我们在src里面写的代码，只是webpack用来分析依赖关系的，根据import，require等等关键字进行分析依赖关系的，最后打包出来的js文件是不带任何模块化的，所以webpack开发可以支持各种模块化的语法，但是配置文件不行。

source map

关于source map的一个介绍，它翻译过来是源码地图，它主要是为了帮助我们开发的时候进行调试的一个工具，source map是一个配置，配置不仅记录了所有源码的内容，还记录了和转换后的代码的对应关系

浏览器处理source map的原理

请添加图片描述

source map 应在开发环境中使用，作为一种调试手段
source map 不应该在生产环境中使用，source map的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用source map，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题。

dev配置

这里的dev配置，主要是配置sourcemap的，具体的配置可以参考：

查看官网看关于dev的一个最佳实践

https://www.webpackjs.com/configuration/devtool/

官网的解释

此选项控制是否生成，以及如何生成 source map。

webpack编译过程

整个过程大致可以分为三步

初始化
编译
输出

初始化

webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。

编译

创建chunk

chunk是webpack在内部构建过程中的一个概念，译为块，它表示通过某个入口找到的所有依赖的统称。

根据入口模块（默认为./src/index.js）创建一个chunk

每个chunk都有至少两个属性：

name：默认为main
id：唯一编号，开发环境和name相同，生产环境是一个数字，从0开始

构建所有依赖模块

请添加图片描述

这里其实就有点类似我们上次分析的编译结果的内容，首先会看是否记录，也就是缓存，没记录就继续。然后通过nodejs读取文件内容，把字符串的内容通过工具处理成ast抽象语法树，然后根据这个树结构里面的一些关键字，require，import来去分析依赖关系，记录在dependencies中，最后会记录在chunk里面。

产生chunk assets

在第二步完成后，chunk中会产生一个模块列表，列表中包含了模块id和模块转换后的代码

接下来，webpack会根据配置为chunk生成一个资源列表，即chunk assets，资源列表可以理解为是生成到最终文件的文件名和文件内容

请添加图片描述

chunk hash是根据所有chunk assets的内容生成的一个hash字符串
hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变

在这里插入图片描述

合并chunk assets

将多个chunk的assets合并到一起，并产生一个总的hash

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这里插入图片描述

输出

此步骤非常简单，webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。

总结

请添加图片描述

涉及术语

module：模块，分割的代码单元，webpack中的模块可以是任何内容的文件，不仅限于JS
chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块是从入口模块通过依赖分析得来的
bundle：chunk构建好模块后会生成chunk的资源清单，清单中的每一项就是一个bundle，可以认为bundle就是最终生成的文件
hash：最终的资源清单所有内容联合生成的hash值
chunkhash：chunk生成的资源清单内容联合生成的hash值
chunkname：chunk的名称，如果没有配置则使用main
id：通常指chunk的唯一编号，如果在开发环境下构建，和chunkname相同；如果是生产环境下构建，则使用一个从0开始的数字进行编号

入口和出口

上面了解了webpack编译过程之后，我们再来看webpack关于入口和出口的一些配置

入口

中文官网：https://www.webpackjs.com/configuration/entry-context/

中文官网解释：

入口对象是用于 webpack 查找开始构建 bundle 的地方。

entry配置

这里的配置是一个对象，对象的属性名可以随意，对象的属性值必须是一个字符串路径或者字符串路径数组，或者描述符。

这里传递的属性可以有多个，多个的话会打包多个js，如果传递的属性一个，属性值数组的话则会合并字符串数组里面的代码

module.exports = {

  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js',
  },

};

出口

中文官网：https://www.webpackjs.com/configuration/output/

中文官网解释：

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

const path = require("path")

module.exports = {
    output: {
        path: path.resolve(__dirname, "target"), //必须配置一个绝对路径，表示资源放置的文件夹，默认是dist
        filename: "[id].[chunkhash:5].js" //配置的合并的js文件的规则
    },
}