观看了webpack视频课程后，我把课程学习到的以及之前学过的知识点，梳理分析如下。

1_什么是webpack

官方的英文概念

webpack is a static module bundler for modern JavaScript applications.

中文翻译：

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

详细拆解：

打包bundler：webpack可以将帮助进行打包，所以它是一个打包工具
静态的static：这样表述的原因是最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
现代的modern：前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

在这里插入图片描述

2_安装webpack

2.1_Webpack的默认打包

通过webpack进行打包，之后运行打包之后的代码，在目录下直接执行命令：webpack

生成一个dist文件夹，里面存放一个main.js的文件，就是打包之后的文件：

这个文件中的代码被压缩和丑化了；另外发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚打包后的文件是否需要转成ES5之前的语法，后续需要通过babel来进行转换和设置；虽然可以正常进行打包的，但是webpack是如何确定的入口的呢？

事实上，当运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；所以，如果当前项目中没有存在src/index.js文件，那么会报错；当然，也可以通过配置来指定入口和出口

npx webpack --entry ./src/main.js --output-path ./build

2.2_创建局部的webpack

前面直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。第一步：创建package.json文件，用于管理项目的信息、库依赖等

npm init

第二步：安装局部的webpack

npm install webpack webpack-cli -D

第三步：使用局部的webpack

npx webpack

第四步：在package.json中创建scripts脚本，执行脚本打包即可

npm run build

"scripts":{
   "build": "webpack "
}

3_webpack打包的核心步骤

（1）入口点确定：Webpack需要知道应用程序的入口点，即从哪个文件开始打包。通过配置文件（例如webpack.config.js）中的entry属性或命令行参数指定入口文件。

（2）依赖解析：Webpack会根据入口文件及其依赖关系，递归地解析所有模块的依赖关系。它会分析每个模块引入了哪些其他模块，形成一个依赖图。

（3）加载模块：在解析依赖关系后，Webpack会根据不同的文件类型使用相应的加载器（Loader）来处理模块。例如，对于JavaScript模块，Webpack会使用Babel进行转译，对于CSS模块，Webpack会使用CSS加载器。

（4）代码转译和优化：Webpack会对加载的模块进行转译和优化。它可以使用各种插件和工具，如Babel、UglifyJS等，对代码进行压缩、优化和转换，以提升性能和兼容性。

（5）打包输出：经过处理和优化的模块被打包成最终的静态资源文件。Webpack提供了多种输出文件的方式，包括单个文件、多个文件、代码拆分等。通过配置文件中的output属性可以指定输出文件的路径和命名规则。

（6）后处理阶段：在输出文件生成后，Webpack还可以执行一些后处理操作。例如，自动插入HTML文件、生成sourcemap文件、启动本地开发服务器等。

4_Webpack打包图片

7.1_引入

在项目中使用图片，比较常见的方式是两种：

img元素，设置src属性；
其他元素（比如div），设置background-image的css属性；

但是以上两种方式，打包会报错

4.2_认识asset module type

当前使用的webpack版本是webpack5：

在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader 、url-loader、file-loader；
在webpack5开始，可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加 4 种新的模块类型type，来替换所有这些 loader：

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
asset/source 【基本不用】导出资源的源代码。之前通过使用 raw-loader 实现；
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现；

model.exports 中打包图片的代码

  module: {
    rules: [
      {     
        test: /\.(png|jpe?g|svg|gif)$/,
        // 方式1.打包两张图片, 并且这两张图片有自己的地址, 将地址设置到img/bgi中
        // 缺点: 多图片加载的两次网络请求
        type: "asset/resource",

        // 方式2.将图片进行base64的编码, 并且直接编码后的源码放到打包的js文件中
        // 缺点: 造成js文件非常大, 下载js文件本身消耗时间非常长, 造成js代码的下载和解析/执行时间过长
        //type: "asset/inline"
      }
    ]
  }

4.3_自定义文件的输出路径和文件名

方式一：修改output，添加assetModuleFilename属性；

方式二：在Rule中，添加一个generator属性，并且设置filename；

这里介绍几个最常用的placeholder：

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

4.4_url-loader的limit效果

开发中往往是小的图片需要转换，但是大的图片直接使用图片即可

这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
而大的图片也进行转换，反而会影响页面的请求速度；

需要两个步骤来实现：

步骤一：将type修改为asset；
步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

  module: {
    rules: [
      {     
        test: /\.(png|jpe?g|svg|gif)$/,
        // 3.合理的规范:
        // 3.1.对于小一点的图片, 可以进行base64编码
        // 3.2.对于大一点的图片, 单独的图片打包, 形成url地址, 单独的请求这个url图片
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024
          }
        },
        generator: {
          // 占位符
          // name: 指向原来的图片名称
          // ext: 扩展名
          // hash: webpack生成的hash
          filename: "img/[name]_[hash:8][ext]"
        }
          
      }    
   ]
  }

5_Webpack

5.1_为什么需要babel

事实上，在开发中很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：

开发中，想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
所以，学习Babel对于理解代码从编写到线上的转变过程至关重要；

Babel到底是什么呢？

Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；
包括：语法转换、源代码转换等；

如下图，上面的代码是ES6+的代码，下面的代码是转化后的javaScript代码在这里插入图片描述

5.2_Babel命令行使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

如果希望在命令行尝试使用babel，需要安装如下库：

@babel/core：babel的核心代码，必须安装；
@babel/cli：可以让在命令行使用babel；

npm install @babel/cli @babel/core -D

使用babel来处理的源代码：

src：是源文件的目录；
–out-dir：指定要输出的文件夹dist，dist

npx babel src --out-dir dist

5.3_插件的使用

比如需要转换箭头函数，那么就可以使用箭头函数转换相关的插件：

npm install @babel/plugin-transform-arrow-functions -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果：会发现 const 并没有转成 var

这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
需要使用 plugin-transform-block-scoping 来完成这样的功能；

npm install @babel/plugin-transform-block-scoping -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

2.4_Babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，可以使用预设（preset），暂时不需要理解预设代表的含义；

安装@babel/preset-env预设：

npm install @babel/preset-env -D

执行如下命令：

npx babel src --out-dir dist --presets=@babel/preset-env

5.5_babel-loader

在实际开发中，通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。

那么就需要去安装相关的依赖。如果之前已经安装了@babel/core，那么不需要再次安装；

npm install babel-loader -D

可以设置一个规则，在加载js文件时，使用的babel：

moudule:{
  rules:[
  	{
        test: /\.js$/,
        use: [
          { 
            loader: "babel-loader", 
            //省略的插件代码
            // options: {
            //   plugins: [
            //     "@babel/plugin-transform-arrow-functions",
            //     "@babel/plugin-transform-block-scoping"
            //   ]
            // } 
          }
        ]
      }
    ]
}

5.6_babel-preset

如果一个个去安装使用插件，那么需要手动来管理大量的babel插件，可以直接给webpack提供一个preset，webpack会根据的预设来加载对应的插件列表，并且将其传递给babel。

比如常见的预设有三个：

env
react
TypeScript

安装preset-env：

npm install @babel/preset-env

babel.config.js代码

module.exports = {
 //插件代码可以在此处填写
  // plugins: [
  //   "@babel/plugin-transform-arrow-functions",
  //   "@babel/plugin-transform-block-scoping"
  // ]
  //下面是预设代码
  presets: [
    "@babel/preset-env"
  ]
}

6_HtmlWebpackPlugin

官方对Plugin的描述：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

Loader是用于特定的模块类型进行转换；
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

所以，Webpack的另一个核心是Plugin

HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。
在进行项目部署的时，必然也是需要有对应的入口文件index.html；
所以也需要对index.html进行打包处理；

对HTML进行打包处理可以使用另外一个插件：HtmlWebpackPlugin；

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

生成index.html分析

现在自动在dist文件夹中，生成了一个index.html的文件，该文件中也自动添加了打包的bundle.js文件；文件是如何生成的？

默认情况下是根据ejs的一个模板来生成的；
在html-webpack-plugin的源码中，有一个default_index.ejs模块；

生成的index.html内容是默认的模板，也可以生成自己想要的模板

7_开启本地服务器

7.1_开启本地服务器原因

目前开发的代码，为了运行需要有两个操作：

操作一：npm run build，编译相关的代码；
操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；

这个过程经常操作会影响的开发效率，希望可以做到，当文件发生变化时，可以自动的完成编译和展示；为了完成自动编译，webpack提供了几种可选的方式：

webpack watch mode；
webpack-dev-server（常用）；
webpack-dev-middleware；

7.2_webpack-dev-server

上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：

当然，目前可以在VSCode中使用live-server来完成这样的功能；
但是，希望在不适用live-server的情况下，可以具备live reloading（实时重新加载）的功能；

安装webpack-dev-server

npm install webpack-dev-server -D

修改配置文件，启动时加上serve参数： packjson.js文件中

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack serve --config webpack.config.js"
  },

webpack.config.js文件中

module.exports = {
  devServer: {
  }
}

webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中。事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

8_HMR热模块替

8.1_认识

什么是HMR？

HMR的全称是Hot Module Replacement，翻译为模块热替换；
模块热替换是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

HMR通过如下几种方式，来提高开发的速度：

不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
只更新需要变化的内容，节省开发的时间；
修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

如何使用HMR呢？

默认情况下，webpack-dev-server已经支持HMR，只需要开启即可（默认已经开启）；
在不开启HMR的情况下，当修改了源代码之后，整个页面会自动刷新，使用的是live reloading；

8.2_开启HMR

修改webpack.config.js配置

module.exports = {
  devServer: {
    hot: true,
  }
}

浏览器的控制台会出现下面的提示

[HMR] waiting for update signal from wDs.. .
[WDS] Hot Module Replacement enabled.
12

但是当修改了某一个模块的代码时，依然是刷新的整个页面，这是因为需要去指定哪些模块发生更新时，进行HMR；

// 指定哪一个模块需要HMR
if (module.hot) {
  module.hot.accept("./utils/demo.js", () => {
    console.log("demo模块发生了更新")
  })
}
123456

8.3_框架的HMR

有一个问题：在开发其他项目时，是否需要经常手动去写入 module.hot.accpet相关的API呢？比如开发Vue、React项目，修改了组件，希望进行热更新，这个时候应该如何去操作呢？

事实上社区已经针对这些有很成熟的解决方案了：

比如vue开发中，使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；
比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用react-refresh）；

9_devServ

9.1_host配置9

host设置主机地址：

默认值是localhost；
如果希望其他地方也可以访问，可以设置为 0.0.0.0；

localhost 和 0.0.0.0 的区别：

localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是主机自己发出去的包，直接被自己接收;
- 正常的数据库包经常应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
- 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;
- 比如监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的;
0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序。比如监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的

9.2_port、open、compress

port设置监听的端口，默认情况下是8080

open是否打开浏览器：

默认值是false，设置为true会打开浏览器；
也可以设置为类似于 Google Chrome等值；

compress是否为静态文件开启gzip compression。默认值是false，可以设置为true；

webpack技术总结 | 青训营