前端构建工具 webpack 笔记

1、了解 webpack

1、定义：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所程序时，需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

2、静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件

3、打包：把静态模块内容，压缩，整合，转译等（前端工程化）

1）把 less / sass 转成 css 代码

2）把 ES6+ 降级成 ES5

3）支持多种模块标准语法

4、问题：为何不学 vite ？

因为：很多项目还是基于 Webpack 构建，并为 Vue React 脚手架使用做铺垫！

2、使用 webpack

1、需求：封装 utils 包，校验手机号长度和验证码长度，在 src/index.js 中使用并打包观察

2、步骤：

1）新建并初始化项目，编写业务源代码
javascript 复制代码
1、创建包管理文件：package.json
    npm init -y

2、编写业务代码 
2）下载webpack webpack-cli到当前项目中（版本独立），并配置局部自定义命令
javascript 复制代码
    Webpack是一个功能强大的模块打包工具，而Webpack-CLI则是用于在命令行中执行Webpack相关操作的工具。
    它们通常一起使用，以便更好地管理和构建前端项目。

1、终端：
    npm i webpack webpack-cli --save-dev

2、package.json:  [我们自定义一个命令 build，但是最终执行的是 webpack]
    "scripts": {
        "build":"webpack"
    }
3）运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
javascript 复制代码
    执行我们定义的命令，即执行了 webpack ，进行打包
    npm run build

3、修改 Webpack 打包出入口

webpack 官方文档：概念 | webpack 中文文档 (docschina.org)

1）项目根目录，新建 webpack.config.js 配置文件

2）导出配置对象，配置入口，出口文件的路径

1、下面是引入 path 模块，path.resolve作用是，把下面 __dirname (可得到当前绝对路径) 和后面的字符串，拼接成一个绝对路径

2、entry：配置需要打包文件的文件路径

3、output：配置打包后文件的存储显示路径

1）这里的path.resolve第二参数是打包后输出的文件夹名称

2）filename：配置打包后的文件名

3）clean: true 生成打包后内容之前，清空原有的输出目录【和filename同位置】

3）重新打包观察注意：只有和入口产生直接/间接的引入关系，才会被打包

**执行命令，****npm run build，**最后输出如下图框中

4）打包后的 js 文件，例子如下【我用了自动换行，让你们看清楚】

4、webpack 打包输出 index.html 文件

注意：前面我们打包的都是 js 文件，那么 html 文件怎么打包到 dist 文件夹里面呢？

官方网址指向**：****HtmlWebpackPlugin | webpack 中文文档 (docschina.org)**

1）安装对应的包

javascript 复制代码

    npm install html-webpack-plugin --save-dev

2）在webpack.config.js中配置

3）重新打包观察

**执行命令，****npm run build，**最后输出如下图框中

4）打包后的 html 文件，例子如下【我用了自动换行，让你们看清楚】

5、webpack 打包 css 代码【js 文件中】

1、和打包 html 文件一样，我们需要下载对应的包，用于打包该文件****到【js 文件中】

1）加载器 css-loader：解析 css 代码

2）加载器 style-loader：把解析后的 css 代码插入到 DOM

2、注意：Webpack 默认只识别 js 代码

3、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

style-loader | webpack 中文文档 (docschina.org)

1）准备css文件代码引入到src文件夹中

2）准备 css 代码，并引入到 js 中【没错，就是引入 js 文件中】

2）下载css-loader 和 style-loader本地软件包

javascript 复制代码

  同时，下载两个加载器
    npm i css-loader style-loader --save-dev

3）配置webpack.config.js让 Webpack 拥有该加载器功能

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        // 匹配 css 文件，/i 就是 无论后缀大小写
        test: /\.css$/i,
        // 使用 这两个加载器，注意，它是从最后一个元素【这里是css-loader】开始使用，顺序不能改变
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

4）重新打包观察

**执行命令，****npm run build，**最后输出如下图框中【注意，下面是 js 文件】

最后打包后页面和打包前页面展示一样

6、webpack 打包 css 代码【css 文件中】

1、下载对应的包，用于打包该文件到**【独立的 css 文件中】**

1）加载器 css-loader：解析 css 代码

**2）**插件 mini-css-extract-plugin：提取 css 代码【webpack5 才有】

2、注意：【mini-css-extract-plugin不能和 style-loader 一起使用】

**3、好处：**css 文件可以被浏览器缓存，减少 js 文件体积

4、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)

1、下载mini-css-extract-plugin本地软件包

javascript 复制代码

    npm install mini-css-extract-plugin --save-dev

2、配置webpack.config.js让 Webpack 拥有该插件功能

javascript 复制代码

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,

        // 注意：style-loader 和 MiniCssExtractPlugin.loader 不能同时使用
        // use: ['style-loader', "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3、打包后观察效果

**注意：执行命令，****npm run build，**这里打包后的 css 代码，还没有被压缩

7、webpack 打包 css 代码【压缩 css 代码】

1、下载对应的包，用于打包该文件到**【独立的 css 文件中】**

1）加载器 css-loader：解析 css 代码

**2）**mini-css-extract-plugin：提取 css 代码【webpack5 才有】

**3）**css-minimizer-webpack-plugin ：压缩 css 代码

2、注意：【mini-css-extract-plugin不能和 style-loader 一起使用】

**3、好处：**css 文件可以被浏览器缓存，减少 js 文件体积

4、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org) 【这个是生产模式压缩】

1、下载css-minimizer-webpack-plugin本地软件包

javascript 复制代码

    npm install css-minimizer-webpack-plugin --save-dev

2、配置webpack.config.js让 Webpack 拥有该插件功能

javascript 复制代码

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`）
      `...`, // 保留这个，就是使 js 代码打包后，还能压缩
      new CssMinimizerPlugin(),
    ],
  }
};;

3、打包后观察效果

**注意：执行命令，****npm run build，**这里的 css 代码已经被压缩了

8、webpack 打包 less 代码

1、下载对应的包，用于打包该文件

1）加载器 css-loader：解析 css 代码

**2）**mini-css-extract-plugin：提取 css 代码

3）less less-loader：下载 less 和 less-loader 包

2、注意：【mini-css-extract-plugin不能和 style-loader 一起使用】

3、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)

less-loader | webpack 中文文档 (docschina.org)

1、下载less less-loader本地软件包

javascript 复制代码

     npm install less less-loader --save-dev

2、新建 less 代码（设置背景图）并引入到 index.js 中

3、配置webpack.config.js让 Webpack 拥有该插件功能

javascript 复制代码

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loade,
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

4、打包后观察效果

注意：执行命令，npm run build，因为用了mini-css-extract-plugin，最后，这段代码打包后，在输出的 css 文件中**【注意：图片所在的文件夹也被打包到 dist 文件夹里面了】**

9、webpack 打包图片

**资源模块：Webpack5 内置资源模块（字体，图片等）打包，**无需额外 loader，无需下载包

官方网址指向：资源模块 | webpack 中文文档 (docschina.org)

1、配置 webpack.config.js 让 Webpack 拥有打包图片功能

这个规则的作用是匹配以 .png、.jpg、.jpeg、.gif 结尾的文件，并使用 asset 模块类型进行处理。

asset 模块类型是 webpack 5 引入的一种处理资源的方式，它会根据文件大小，自动决定是将文件转换为 Data URL (DataURL)，还是将其复制到输出目录。

1）占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

2）占位符【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

3）占位符【query】保留引入文件时代码中查询参数（只有 URL 下生效）

javascript 复制代码

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ],
  },
};

2、打包后观察效果和区别

注意：判断临界值默认为 8KB

1）大于 8KB 文件：发送一个单独的文件并导出 URL 地址【打包输出图片】

2）小于 8KB 文件：导出一个 data URI（base64字符串）【打包后转为base64字符串】

10、webpack 搭建开发环境

问题：之前改代码，需重新打包才能运行查看，效率很低

开发环境：配置webpack-dev-server快速开发应用程序

**作用：启动 Web 服务，**自动检测代码变化，热更新到网页

注意：dist 目录和打包内容是在内存里（更新快）【并非打包到根目录下】

官网地址指向：开发环境 | webpack 中文文档 (docschina.org)

1、下载webpack-dev-server软件包到当前项目

javascript 复制代码

    npm i webpack-dev-server--save-dev

2、设置模式为开发模式，并配置自定义命令

3、使用++npm run dev++ 来启动开发服务器，试试热更新效果

11、webpack 的打包模式

打包模式：告知 Webpack 使用相应模式的内置优化

1、在webpack.config.js配置文件设置 mode 选项

2、在package.json命令行设置 mode 参数

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

12、webpack 打包模式的应用

**需求：**在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

1、下载cross-env软件包到当前项目

javascript 复制代码

    npm i cross-env --save-dev

2、配置自定义命令，传入参数名和值（会绑定到process.env对象下）

javascript 复制代码

当你运行对应命令 npm run build 或者dev 时，根据 pageage.json 的 NODE_ENV=？？，执行

cross-env ：固定

NODE_ENV=production  ：自定义的，也可以直接写 a=b，但是为了语义化点

3、在 webpack.config.js 区分不同环境使用不同配置

javascript 复制代码

process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader

process.env ：固定的，通过这个调用 我们定义的值

13、前端-注入环境变量

需求：前端项目中 index.js 中，开发模式下打印语句生效，生产模式下打印语句失效

**问题：**cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV

解决：使用 Webpack 内置的DefinePlugin插件

作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

javascript 复制代码

plugins: [
    new webpack.DefinePlugin({
      // 就是，在 前端项目 某个js文件 中，遇见 process.env.NODE_ENV 就赋值 给 模式对应的值
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],

测试的结果：

14、开发环境调错 - source map

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

source map**：**可以准确追踪 error 和 warning 在原始代码的位置

**设置：**webpack.config.js 配置 devtool 选项

**inline-source-map****选项：**把源码的位置信息一起打包在 js 文件内

**注意：source map 仅适于开发环境，**不要在生产环境使用（防止被轻易看源码位置）

官网网址指向：Devtool | webpack 中文文档 (docschina.org)

javascript 复制代码

const config = {
  ...
}

// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}

module.exports = config

解决方法：下载 **cross-env 软件包，**根据 pageage.json 中设置的环境变量，判断当前启动的是生产模式，还是开发模式

15、解析别名 alias 【用 @ 来代表 src 绝对路径】

解析别名：配置模块如何解析，创建 import 引入路径的别名，来确保模块引入变得更简单

例如：原来路径如图，比较长而且相对路径不安全

解决：在 webpack.config.js 中配置解析别名 @ 来代表 src 绝对路径

官网网址指向：webpack 中文文档 (docschina.org)

javascript 复制代码

module.exports = {
  //...
  resolve: {
    // __dirname 获取的是 webpack.config.js 所在文件夹的绝对路径
    '@': path.resolve(__dirname, 'src')
  },
};

16、开发模式使用 npm 下载包 || 生产模式使用 CDN 引用

CDN定义：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

cdn 引入网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

需求：开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

1、在html中引入第三方库的CDN 地址并用模板语法判断

html 复制代码

下面这个是 htmlWebpackPlugin 规定的用法，我们后面在 options 定义 useCdn 的值 判断就行

<% if(htmlWebpackPlugin.options.useCdn){ %>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">

<% } %>

2、配置webpack.config.js 中 externals外部扩展选项（防止某些 import 的包被打包）

javascript 复制代码

const config = {
 plugins: [
    new HtmlWebpackPlugin({
      useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址
    }),
 ]
}

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios',
  }
}

module.exports = config

3、两种模式下打包观察效果

17、webpack 多页面打包

多页面：多个 html 文件，切换页面实现不同业务逻辑展示

前端构建工具 webpack 笔记

1、了解 webpack

2、使用 webpack

3、修改 Webpack 打包出入口

4、webpack 打包输出 index.html 文件

5、webpack 打包 css 代码 【js 文件中】

6、webpack 打包 css 代码【css 文件中】

7、webpack 打包 css 代码【压缩 css 代码】

8、webpack 打包 less 代码

9、webpack 打包图片

10、webpack 搭建开发环境

11、webpack 的 打包模式

12、webpack 打包模式的应用

13、前端-注入环境变量

14、开发环境调错 - source map

15、解析别名 alias 【用 @ 来代表 src 绝对路径】

16、开发模式使用 npm 下载包 || 生产模式使用 CDN 引用

17、webpack 多页面打包

5、webpack 打包 css 代码【js 文件中】

11、webpack 的打包模式