webpack5 基础

用户8399530307825
197 阅读5分钟

参考：首页 | 尚硅谷 Web 前端之 Webpack5 教程 (yk2012.github.io)

学习资源：

首页 | 尚硅谷 Web 前端之 Webpack5 教程 (yk2012.github.io)

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

iconfont-阿里巴巴矢量图标库

List of available rules - ESLint中文文档 (bootcss.com)

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

打包工具的作用

  1. 浏览器不能识别 ES6 模块化语法、Less/Sass预处理器语法，必须通过weabpack打包工具编译成浏览器能识别的 JS、CSS 等语法。
  2. 压缩代码
  3. 做兼容性处理
  4. 提升代码性能

有哪些打包工具

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

依赖下载

npm i webpack webpack-cli -D  // -D 开发时的依赖

配置文件 webpack.config.js

// 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", // 开发模式
};

loader 加载器

webpack只能处理js类型的文件，但开发时我们有样式资源、字体图标、图片资源、html 资源等，所以我们要加载器loader来编译这些资源

处理样式资源的loader

-   `css-loader`：负责将 Css 文件编译成 Webpack 能识别的模块
-   `style-loader`：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
-   `less-loader`：负责将 Less 文件编译成 Css 文件
-   `sass-loader`：负责将 Sass 文件编译成 css 文件
-   `sass`：`sass-loader` 依赖 `sass` 进行编译
-   `stylus-loader`：负责将 Styl 文件编译成 Css 文件

处理图片资源的loader

webpack 4

-   `file-loader`：将文件发送到输出文件夹，并返回（相对）URL
-   `url-loader`：像 file loader 一样工作，但如果文件小于限制，可以返回 [data URL]

webpack 5

Webpack5 已经将两个 file-loader 和 url-loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

规则：
     {
        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]",
        },
      },

自动清空上次打包资源

webpack 4

-   `clean-webpack-plugin`：自动清空上次的打包资源

webpack 5

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

处理字体图标资源

      {
        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]",
        },
      },

处理js资源

ESLint

  1. 安装 plugin
  2. 配置文件 eslintrc.js
  3. 在扩展中下载 ESLint 插件，如果不符合配置文件内容会有红色波浪线
  4. 忽略文件.eslintignore，插件不会检查里面标注的文件
-   eslint-webpack-plugin：代码规范化插件

Babel

  1. 安装 loader
  2. 配置文件 babel.config.js
-   babel-loader ：主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
-   @babel/core：使用Bable进行转码的核心npm包
-   @babel/preset-env：一个智能预设，允许您使用最新的 JavaScript

     {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },

处理 html 资源

  1. 安装 plugin
  2. 去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入
-   html-webpack-plugin：该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。

开发服务器 & 自动化

每次修改代码，都要重新打包生成新资源，再引用，通过以下方法无需每次重新打包，所有代码都会在内存中编译打包，并不会输出到 dist 目录下

  1. 安装 webpack-dev-server 包
  2. 在 webpack 的配置文件中添加节点 devServer
 // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

生产模式配置文件 和 开发模式配置文件

在 config 文件夹下：

  • 生产模式配置文件：webpack.prod.js
  • 开发模式配置文件：webpack.dev.js

webpack.dev.js

  • 不需要设置文件输出路径，开发模式没有输出，不需要指定输出目录
  • 不需要设置 clean：true，开发模式没有输出，不需要清空输出结果
  • mode："development"

webpack.prod.js

  • 需要设置文件输出路径，生产模式需要输出
  • 需要设置 clean：true，生产模式有输出，需要清空输出结果
  • 不需要 devServer 节点
  • mode："production"

配置运行指令

在 package.json 文件下配置

{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

CSS 处理（生产模式下进行性能优化）

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

  1. 下载 plugin
  2. 配置
-   mini-css-extract-plugin：本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

CSS 兼容性处理

  1. 下载 loader
  2. 配置
  3. 控制兼容性：在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度
-   postcss-loader：CSS 兼容性处理 
-   postcss 
-   postcss-preset-env

// package.json
{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

CSS 压缩

  1. 下载 plugin
  2. 配置
-   css-minimizer-webpack-plugin：这个插件使用 cssnano 优化和压缩 CSS。

html 压缩

默认生产模式已经开启了：html 压缩和 js 压缩，不需要额外进行配置

总结

开发时，我们会使用框架，ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发，但浏览器无法识别并运行 这些东西，所以我们需要webpack打包工具来编译成浏览器能识别的 JS、CSS等语法

首先需要下载node，使用 npm init -y 生成基础的 package.json 文件，包的依赖管理配置文件

下载 webpack 和 webpack-cli 包

建立配置文件 webpack.config.js（entry、output、loader、plugins、mode）

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错，所以我们要使用loader对这些文件进行处理，我们也可以使用plugin扩展webpack的功能，如 ESLint

每次写完指令都需要手动输入指令才能编译代码，太麻烦，希望能够开启服务器和自动化更新，所以下载webpack-dev-serve包，添加devServe节点进行配置，这样使用开发服务器时，所有的代码都会在内存中编译打包，并不会输出到dist目录下

开发完后，我们应该进入生产模式（对代码进行优化）

准备两个文件进行配置，开发模式配置文件（webpack.dev.js）和 生产模式配置文件（webpack.prod.js）

对CSS进行优化，打包后生成单独文件，否则会闪屏，当html解析后，js才解析动态生成标签，通过 mini-css-extract-plugin 实现。

对CSS进行兼容处理，兼容不同版本的浏览器。

对CSS进行压缩处理，变成一行默认生产模式已经开启了：html 压缩和 js 压缩，不需要额外进行配置。

avatar
文章
阅读
粉丝