Webpack5从入门到实践

一、前言 ​

为什么使用打包工具 ​

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

打包工具都有哪些 ​

• Grunt
• Gulp
• Parcel
• Webpack
• Rollup
• Vite
• ...

二、基本使用 ​

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器段运行了。

Webpack入口文件叫做 chunk,

Webpack 输出的文件叫做 bundle。

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。

所以我们学习 Webpack，就是主要学习如何处理其他资源。

下载依赖 ​

打开终端，来到项目根目录。运行以下指令：

• 初始化package.json

npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

• 下载依赖

npm i webpack webpack-cli -D

启用 Webpack ​

• 开发模式

npx webpack ./src/main.js --mode=development

• 生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

三、基本配置 ​

5 大核心概念 ​

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

// 简单配置之后

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

开发模式功能 ​

1. 编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

2. 代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

3. 开发服务器的配置与自动化

生产模式功能 ​

1. 优化代码运行性能
2. 优化代码打包速度
3. 不同模块提取单个文件，兼容性的处理，文件的压缩，图片的压缩

四、加载器处理样式资源 ​

特点 ​

• 配置在rules数组中
• test正则匹配对应的文件
• use数组从后先前、从下往上执行
• loader书写顺序：style-loader，css-loader，css预编译器loader，postcss-loader（流程结束会打包到入口文件js中）

      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },

• 将 style-loader 换成 MiniCssExtractPlugin.loader 会将css打包成单独文件

  js

  // 以sass-loader配置为例
  	 {
          test: /\.s[ac]ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                  ],
                },
              },
            },
            "sass-loader",
          ],
        },

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  

五、加载器处理图片资源 ​

对比webpack4 ​

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

加载器配置 ​

      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },

进行图片资源优化 ​

将较小的图片处理为base64格式

• 优点：减少请求数量
• 缺点：体积变得更大

      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        // 添加配置项
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },

六、加载器处理字体图标资源 ​

type: "asset/resource"和type: "asset"的区别：

1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]", // 修改输出资源路径与名称
        },
      },

七、加载器处理其他资源 ​

      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

八、修改输出资源的名称和路径 ​

以处理图片的加载器为例

      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },

九、自动清空打包资源目录 ​

在 output 中做 clean 配置

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },

十、HTML资源处理 ​

插件功能 ​

自动导入 打包生成的 js 等资源

安装插件 ​

npm i html-webpack-plugin -D

配置插件 ​

// 导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 省略···

// 配置
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],

十一、eslint 规范代码 ​

十二、babel 降级js代码 ​

十三、开发服务器&自动化 ​

与 webpack 五大核心 同级 的 根配置项

// 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },