【webpack配置、处理资源】这一次再也不怕webpack面试了

吃饺子不吃馅
1,524 阅读5分钟

往期精彩文章推荐

🔥🔥🔥微前端无界(wujie)源码浅析——子应用加载与js、css沙箱实现
🏠🏠🏠微前端我劝你千万别无脑冲qiankun
一个js库就把你的网页的底裤🩲都扒了——import-html-entry
🧶创建js沙箱都有哪些方式
两分钟快速了解css样式隔离方案有哪几种
这一次再也不怕webpack面试了【webpack配置、处理资源】
🏝️🏝️🏝️一个babel插件让项目中所有antd table实现拖拽控制列宽

一、Webpack 是什么？

Webpack 是一个静态模块打包工具。它能够将项目中的各种资源视为模块，并根据模块之间的依赖关系，将它们打包成静态资源文件（bundle）。这些静态资源文件可以被浏览器直接加载和执行，从而实现前端应用的运行。

Webpack 的核心概念：

  • 入口 (Entry): 指定 Webpack 从哪个文件开始构建依赖图。

  • 输出 (Output): 指定 Webpack 打包后的文件输出位置和文件名。

  • 加载器 (Loader): 用于对不同类型的文件进行处理，例如将 ES6 代码转换为 ES5 代码，将 CSS 文件转换为 JavaScript 模块等。

  • 插件 (Plugin): 用于执行更广泛的任务，例如打包优化、资源管理、环境变量注入等。

  • 代码分割 (Code Splitting): 将代码分割成多个 bundle，实现按需加载，优化页面加载速度。

  • Tree Shaking: 移除 JavaScript 代码中未使用的部分，减少 bundle 体积。

  • 热模块替换 (HMR): 在开发过程中，修改代码后无需刷新页面即可看到更新，提升开发效率。

  • Source Map: 将打包后的代码映射回源代码，方便调试。

二、Webpack 基础配置概览

一个基本的 Webpack 配置文件 (webpack.config.js) 通常包含以下几个部分：

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',

  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  // 模块配置
  module: {
    rules: [
      // 配置各种 loader
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },

  // 插件配置
  plugins: [
    // 配置各种 plugin
  ],

  // 开发服务器配置
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

配置说明：

  • entry: 指定入口文件为 ./src/index.js，Webpack 会从这个文件开始构建依赖图。
  • output: 指定打包后的文件输出到 dist 目录下，文件名为 bundle.js。
  • module.rules: 配置了两种 loader：
    • css-loader 用于处理 CSS 文件，style-loader 用于将 CSS 代码注入到 HTML 页面中。
    • file-loader 用于处理图片等资源文件。
  • plugins: 可以在这里配置各种插件，例如 HtmlWebpackPlugin 用于自动生成 HTML 文件。
  • devServer: 配置开发服务器，方便开发调试。

三、Webpack处理各种资源

处理样式资源

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

css资源

安装

npm i css-loader style-loader -D

配置

  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  • css-loader：负责将 css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 style 标签，里面放置 Webpack 中 css 模块内容

less资源

安装

npm i less-loader

配置

  module: {
    rules: [
      {
        // 用来匹配 .less 结尾的文件
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },

处理 Sass 和 Scss 资源

npm i sass-loader sass -D
  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译

配置和上面一样

use: ["style-loader", "css-loader", "sass-loader"],

处理图片、文件资源

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

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了

请看官网的说明 webpack.docschina.org/guides/asse…

image.png

四种资源模块类型 Webpack 5 提供了四种资源模块类型，分别对应不同的资源处理方式：

  1. asset/resource
    • 类似于 file-loader，将文件输出到输出目录，并返回文件的 URL。
    • 适用于需要单独保存文件的场景（如图片、字体等）。
    • 示例：
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/resource',
    },
  ],
}
  1. asset/inline
    • 类似于 url-loader，将文件作为 Base64 编码的 Data URL 嵌入到 bundle 中。
    • 适用于小文件（如图标、小图片等），可以减少 HTTP 请求。
    • 示例：
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/inline',
    },
  ],
}
  1. asset/source
    • 类似于 raw-loader，将文件内容作为字符串导入。
    • 适用于处理文本文件（如 .txt、.csv 等）。
    • 示例：
module: {
  rules: [
    {
      test: /\.txt$/i,
      type: 'asset/source',
    },
  ],
}
  1. asset
    • 这是一个自动模式，Webpack 会根据文件大小自动选择是使用 asset/resource 还是 asset/inline。
    • 可以通过 parser.dataUrlCondition.maxSize 设置文件大小的阈值。
    • 示例：
module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 4 * 1024, // 4KB 以下的文件会被内联为 Data URL
        },
      },
    },
  ],
}

自定义输出文件名 默认情况下，asset/resource 和 asset 会生成带有哈希值的文件名。你可以通过 generator.filename 自定义输出文件的名称和路径：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/resource',
      generator: {
        filename: 'images/[hash][ext][query]', // 输出到 images 目录
      },
    },
  ],
}

生成HTML

plugins: [new HtmlWebpackPlugin()],

html-webpack-plugin 是一个 Webpack 插件，用于自动生成 HTML 文件，并将打包后的 JavaScript、CSS 等资源自动注入到 HTML 中。它简化了手动管理 HTML 文件的流程，特别适用于多入口或多输出的项目。

主要功能

  1. 自动生成 HTML 文件：根据模板或默认模板生成 HTML 文件。
  2. 自动注入资源：将打包后的 JavaScript、CSS 等资源自动注入到 HTML 中。
  3. 支持自定义模板：可以使用自定义的 HTML 模板文件。
  4. 多页面支持：通过配置多个实例，支持生成多个 HTML 文件。

常用配置选项 以下是一些常用的配置选项：

  1. title
    设置生成的 HTML 文件的标题。

  2. filename
    指定生成的 HTML 文件名，默认是 index.html。

  3. template
    指定自定义的 HTML 模板文件路径。如果不指定，插件会使用默认的模板。

  4. inject
    控制资源注入的位置，可选值：

    • true 或 'body'：将资源注入到 <body> 底部（默认）。
    • 'head'：将资源注入到 <head> 中。
    • false：不自动注入资源。

  5. chunks
    指定要注入的 chunk（如 JavaScript 文件），默认会注入所有 chunk。

  6. favicon
    指定网站图标的路径。

  7. meta
    设置 HTML 文件的 meta 标签。

处理js资源

eslint配置

使用eslint-webpack-plugin配置代码风格检测

npm i eslint-webpack-plugin eslint -D

在eslintrc.js中配置

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
};

配置

const ESLintWebpackPlugin = require("eslint-webpack-plugin")

// webpack中配置
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],

babel配置

babel不多介绍，代码兼容处理

npm install -D babel-loader @babel/core @babel/preset-env

babel-loader 是一个 Webpack 的 loader，用于将 JavaScript 代码（尤其是 ES6+ 语法）转换为向后兼容的 JavaScript 代码，以便在旧版浏览器中运行。它依赖于 Babel 的核心功能，并结合 Babel 的配置文件（如 .babelrc 或 babel.config.js）来实现代码转换。

主要功能

  1. 语法转换：将 ES6+ 语法（如箭头函数、类、模板字符串等）转换为 ES5 语法。
  2. Polyfill 支持：通过 @babel/preset-env 自动引入所需的 Polyfill。
  3. 插件支持：支持使用 Babel 插件来处理特定的语法或特性（如 JSX、TypeScript 等）。
  4. 与 Webpack 集成：无缝集成到 Webpack 的构建流程中。

在 Webpack 配置文件中配置 babel-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配 .js 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], // 使用 @babel/preset-env
          },
        },
      },
    ],
  },
};

Babel 配置文件 通常，Babel 的配置会放在单独的配置文件中（如 .babelrc 或 babel.config.js），而不是直接写在 Webpack 配置中。
示例 .babelrc 文件：

{
  "presets": ["@babel/preset-env"]
}

常用配置选项

  1. presets
    指定 Babel 的预设（preset），常用的有：

    • @babel/preset-env：根据目标环境自动转换 ES6+ 语法。
    • @babel/preset-react：用于处理 React 的 JSX 语法。
    • @babel/preset-typescript：用于处理 TypeScript 语法。

  2. plugins
    指定 Babel 插件，用于处理特定的语法或特性。例如：

    • @babel/plugin-proposal-class-properties：支持类的属性语法。
    • @babel/plugin-transform-runtime：减少代码重复，优化打包体积。

  3. exclude
    排除不需要转换的文件或目录（如 node_modules）。

  4. include
    指定需要转换的文件或目录

css资源提取单独文件

mini-css-extract-plugin 是一个 Webpack 插件，用于将 CSS 提取为单独的文件，而不是将其嵌入到 JavaScript 中。它特别适用于生产环境，可以更好地利用浏览器缓存，并支持 CSS 文件的按需加载。

主要功能

  1. 提取 CSS：将 CSS 从 JavaScript 中提取出来，生成单独的 .css 文件。
  2. 支持按需加载：结合 import() 或动态导入，实现 CSS 的按需加载。
  3. 与 style-loader 的区别：style-loader 将 CSS 注入到 DOM 中，而 mini-css-extract-plugin 生成独立的 CSS 文件。
  4. 支持 HMR（热模块替换）：在开发环境中支持 CSS 的热更新。

在 Webpack 配置文件中引入并使用 mini-css-extract-plugin：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i, // 匹配 .css 文件
        use: [
          MiniCssExtractPlugin.loader, // 提取 CSS
          'css-loader', // 解析 CSS
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css', // 输出的 CSS 文件名
    }),
  ],
};
avatar
文章
阅读
粉丝