Webpack5相关知识点（一）- 基础（5）- 生产模式以及css处理

最新推荐文章于 2022-11-26 15:15:11 发布
最新推荐文章于 2022-11-26 15:15:11 发布
阅读量273 收藏
点赞数
分类专栏： 打包工具 文章标签： 服务器 webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JHY97/article/details/125168138
版权

目录

一、生产模式

1.1 配置文件

1.1.1 webpack.dev.js（开发模式配置文件）

1.1.2 webpack.prod.js（生产模式配置文件）

1.2 配置运行指令

二、css处理

2.1 提取css为单独文件

2.1.1 下载包

2.1.2 webpack.prod.js配置文件

2.2 css兼容性处理

2.2.1 下载包

2.2.2 配置文件

2.2.3 控制兼容性

2.3 css压缩

2.3.1 下载包

2.3.2 配置

一、生产模式

模式下需要对代码进行优化，让其运行性能更好

优化主要从两个角度出发:

  1. 优化代码运行性能
  2. 优化代码打包速度

1.1 配置文件

一般可以创建一个专门存放Webpack配置文件的目录，里面存放开发模式的配置文件以及生产模式的配置文件

以webpack.dev.js（开发模式配置文件）和webpack.prod.js（生产模式配置文件）为例

1.1.1 webpack.dev.js（开发模式配置文件）

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

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径和绝对路径都行
  // 输出
  output: {
    path: undefined, // 开发模式没有输出，不需要指定输出目录
    // 文件名
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 执行顺序从右到左（从下到上）
        use: [
          "style-loader", // 将js中css通过创建style标签添加到html文件中生效
          "css-loader", // 将css资源编译成commonjs的模块到js中
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|JPG)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/fonts/[hash:8][ext][query]",
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 排除node_modules 和 bower_components文件不处理
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  //   插件
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      // 模板，自动引入打包输出资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  //   模式
  mode: "development",
};

运行开发模式指令：

npx webpack serve --config ./config/webpack.dev.js

1.1.2 webpack.prod.js（生产模式配置文件）

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

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径和绝对路径都行
  // 输出
  output: {
    path: path.resolve(__dirname, "../dist"), // 绝对路径
    // 文件名
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    // 自动清空上次打包结果
    clean: true,
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 执行顺序从右到左（从下到上）
        use: [
          "style-loader", // 将js中css通过创建style标签添加到html文件中生效
          "css-loader", // 将css资源编译成commonjs的模块到js中
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|JPG)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/fonts/[hash:8][ext][query]",
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 排除node_modules 和 bower_components文件不处理
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  //   插件
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      // 模板，自动引入打包输出资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  //   模式
  mode: "production",
};

运行生产模式指令：

npx webpack --config ./config/webpack.prod.js

1.2 配置运行指令

可将指令定义在 package.json 中 scripts 中，这样能够更方便运行不同模式的指令

  "scripts": {
    "dev": "npx webpack --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  },

配置完成后只需运行以下指令便可开启对应模式

#开发模式
npm run dev

#生产模式
npm run build

二、css处理

2.1 提取css为单独文件

2.1.1 下载包

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

npm i mini-css-extract-plugin -D
或
npm install --save-dev mini-css-extract-plugin

2.1.2 webpack.prod.js配置文件

建议 mini-css-extract-plugin 与 css-loader 一起使用。

之后将 loader 与 plugin 添加到你的 webpack.prod.js配置文件中。

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

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

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|JPG)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/fonts/[hash:8][ext][query]",
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  //   插件
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  //   模式
  mode: "production",
};

运行指令后，可以在dist目录下看到生成main.css文件

2.2 css兼容性处理

2.2.1 下载包

npm i postcss-loader postcss postcss-preset-env -D

2.2.2 配置文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

但是在样式多时，重复的代码也更多，可以选择封装样式loader函数

webpack.prod.js配置文件处理css兼容性并封装

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

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

// 获取处理样式loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [["postcss-preset-env"]],
        },
      },
    },
    pre,
  ].filter(Boolean);
}

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        use: getStyleLoader(),
      },
      {
        test: /\.less$/,
        use: getStyleLoader("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoader("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoader("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|JPG)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/fonts/[hash:8][ext][query]",
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  //   插件
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  //   模式
  mode: "production",
};

2.2.3 控制兼容性

可以在 package.json 文件中添加 browserslist 来控制样式的兼容性

  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]

2.3 css压缩

2.3.1 下载包

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

npm i css-minimizer-webpack-plugin -D
或
npm install css-minimizer-webpack-plugin --save-dev

2.3.2 配置

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

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

以webpack.prod.js作为案例

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

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

// 获取处理样式loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [["postcss-preset-env"]],
        },
      },
    },
    pre,
  ].filter(Boolean);
}

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/main.js",
    clean: true,
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        use: getStyleLoader(),
      },
      {
        test: /\.less$/,
        use: getStyleLoader("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoader("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoader("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|JPG)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/fonts/[hash:8][ext][query]",
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  //   插件
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin(),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  //   模式
  mode: "production",
};

运行打包指令后，可看到打包后的css文件被压缩了

 

JHY97
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack使用(5)之处理CSS
Science Explorer
09-09 328
一、需要引入的loader 1、style-loader 主要负责创建style标签，并将标签塞入到文档中 2、 css-loader 主要负责css解析 3、 less-loader 负责解析less 二、 如何引入css资源 1、安装配置style-loader 和 css-loader 安装： npm install style-loader --save-dev...
webpack（5）webpack处理css文件
weixin_43880991的博客
07-11 217
css文件处理-准备工作 (以下项目配置都是基于上一篇webpack(4)的基础上) 在项目开发中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。 这里我们就在src目录中创建一个normal.css文件，代码如下： body{ background-color: aqua; } 代码很简单，就是将body设置一个背景颜色，但是此时样式是不会生效的，因为我们根本没有引用...
webpack5 学习（十三）—— 生产环境
且听风吟的博客
03-10 563
在Webpack4.0中，通过mode指定环境，用于配置运行环境。 mode的值可以为development，表示的是开发模式，或者是production，表示的是生产模式。 webpack 会将 production 作为 mode 的默认值去设置。 development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。 在开发环境中，需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module re
webpack5学习（四）：css 处理
激洪的博客
05-30 189
webpack5css 处理
Webpack5中CSS处理(单独文件、兼容及压缩)
小洋人最happy的专栏
05-27 1873
文章目录一、CSS处理1.1 单独文件1.1.1 安装依赖1.1.2 配置1.1.3 测试1.2 兼容处理1.2.1 安装依赖1.2.2 配置1.2.3 控制兼容性1.2.4 测试1.3 压缩1.3.1 安装依赖1.3.2 配置1.3.3 测试二、HTML处理2.1 压缩 一、CSS处理 1.1 单独文件 css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不好 我们应该是单独的css文件，通过link标签加载性能才好 1.1.1
webpack-demo：“ SurviveJS-Webpack 5”演示项目
02-06
**其他标签相关知识点** - **survivejs**：SurviveJS 是一本开源书籍，专注于 Webpack 和 React 开发的最佳实践，本项目遵循了该书中的指导。 - **webpack5-module-federation**：这个标签表明项目中可能包含了如何...
webpack-使用webpack-dev-middleware.rar
04-12
Webpack 是一个流行的模块打包工具，常用于前端开发，它能够将 JavaScript、CSS、图片等静态资源打包成优化过的单一或多个文件，以便于在浏览器中高效加载和运行。`webpack-dev-middleware` 是 Webpack 提供的一个...
webpack-css-imagemin-wrong-hash
05-16
让我们深入探讨这个问题以及相关的JavaScript知识点。 首先，Webpack 在构建过程中会为每个输出文件生成一个基于内容的哈希（Content-Based Hash），这样当文件内容改变时，对应的哈希值也会变化，浏览器会自动加载...
webpack-test:webpack-test
07-14
总结来说，"webpack-test"项目是一个用来测试Webpack配置和功能的实践案例，涵盖了Webpack的基础知识，包括模块打包、加载器、插件的配置和使用，以及如何进行有效的测试和优化。通过这个项目，开发者可以深入理解...
webpack5-skeleton:Webpack5框架。 HTMLCSSSCSSPostCSSJSStaticFonts
03-12
Webpack5 是一个强大的模块打包工具，它允许开发者将 JavaScript、CSS、图像和其他资源组合成一个或多个优化过的静态输出文件，以供生产环境使用。在"webpack5-skeleton"项目中，开发者提供了一个基础的框架，包含了...
typescript-plugin-css-modules：一个TypeScript语言服务插件，提供对CSS模块的支持
02-04
Typescript-plugin-css-modules 用于。 目录 关于这个插件 该插件为IDE和与一起使用的任何其他工具提供类型信息。 目前，TypeScript在编译过程中不支持插件。 这意味着该插件不能： 在编译过程中提供错误，或 为您的项目添加CSS模块支持。 有关更多信息，和/或要添加对此功能的支持，请参阅： : 。 如果您需要其他解决方案，这些项目可能会有所帮助： 有关Jest的支持，请参见 （一些选项之一）。 有关Webpack的配置，请参见作为示例。 安装 要使用Yarn安装： yarn add -D typescript-plugin-css-mod
webpack5修行之道4-webpack优化css处理及资源分类
j178202798的博客
06-17 387
上一篇： 目录 提取css css兼容性处理： 资源分类 css分类: JS分类： 图片分类： 其他资源分类： 提取css 前面我们讲到，css不能被webpack处理，所以需要css-loader来进行翻译，css翻译的css字符串都被打包到了入口文件中了 我们尝试编译上一篇的代码，然后去查看编译后js文件： 可以看到，所有的css文件都在这个js文件中， 如果这个发布到生产环境，会产生什么效果？ 1. 由于是js加载的时候才会动态插入样式到head里，会造成闪..
webpack学习Day2--devServer、提取单独的css文件
weixin_44806635的博客
01-17 110
devServer // 开发服务器devServer：用来自动化（自动化编译、自动打开浏览器、自动刷新浏览器） //特点：只会在内存中编译打包，不会有任何输出； //启动devServer指令为：npm webpack-dev-server //要下载安装这个webpack-dev-server包 devServer:{ //项目构建后的路径： contentBase:resolve{__dirname,'build'}, //启动gzip压缩
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5
lalala_dxf的博客
07-22 2103
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
【vue开发铺垫】Webpack5入门到原理
可可的博客
11-26 654
1、官方解释官网文档从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。
Webpack5学习笔记（基础篇）
qq_44486437的博客
05-28 476
Webpack 基本概念 是什么？ 是一个静态资源打包工具。 可以做什么？ 分为两种模式，分别是开发模式和生产模式。 开发模式（development）：仅能编译JS中的ES Module语法 生产模式（product）：既能编译JS中的ES Module语言，还能压缩JS代码 入门 创建项目（文件夹） 在项目所在文件夹中使用npm init生成package.json文件 使用npm install webpack webpack-cli -g安装webpack 使用npx webpack ./sr
webpack5从零开始，到打包一个项目的基本配置
weixin_小白鼠的博客
05-22 734
webpack5从零开始，上手基础知识 一、安装、认识webpack 安装 webpack基于node环境，所以安装webpack前先安装node npm install webpack webpack-cli --global npm i webpack webpack-cli -D 第一种是全局安装，但是官方不建议我们使用全局安装，全局安装的话很可能更新不及时 第二种是在项目中安装 安装后可查看项目webpack版本信息 npx webpack --version 我安装的版本是：后面的内容都是这个
webpack5学习与实战-（三）-引入其他资源模块
weixin_42349568的博客
02-03 1368
一，什么是资源模块 webpack除了引入js之外，还可以使用内置的资源模块（叫做assets modules），来引入任何的其他类型的资源。 webpack5 之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。 webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。 asset/resour
Vue3学习之旅--之webpack基础-进阶--webpack5?拿来吧你！
听雨少年的博客
07-28 1014
文章目录Webpack打包其他资源file-loader文件的命名规则设置文件的名称设置文件的存放路径url-loaderurl-loader的limitasset module type认识asset module typeasset module type的使用url-loader的limit效果加载字体文件字体的打包webpack的plugin认识pluginCleanWebpackPluginHtmlWebpackPlugin生成index.html分析自定义HTML模板自定义模板数据填充Defin
webpack重要知识点
最新发布
08-18
webpack的重要知识点包括以下几个方面： 1. 模块化打包：webpack将前端的所有资源文件都视为模块，并根据模块的依赖关系进行静态分析，最终打包生成对应的静态资源。 2. 配置文件：webpack使用webpack.config.js文件来配置打包过程。在配置文件中可以设置入口文件、输出路径、加载器、插件等各种参数，以满足项目的需求。 3. 加载器：webpack通过加载器来处理各种类型的文件。常用的加载器有babel-loader用于处理ES6及以上的JavaScript代码，css-loader用于处理CSS文件，file-loader用于处理图片和字体文件等。 4. 插件：webpack的插件用于扩展其功能。常用的插件有HtmlWebpackPlugin用于生成HTML文件，CleanWebpackPlugin用于清理输出目录，MiniCssExtractPlugin用于提取CSS文件等。 5. 开发服务器：webpack-dev-server是一个开发服务器，它可以在内存中编译代码并提供资源，实现快速的开发和调试。 以上是webpack的一些重要知识点，它们可以帮助你更好地理解和使用webpack进行前端资源的构建和打包。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [webpack打包基础知识点与es6知识点.xmind](https://download.csdn.net/download/qq_43291759/13106867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Webpack重要知识点](https://blog.csdn.net/sinat_17775997/article/details/95167425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [webpack知识点总结](https://blog.csdn.net/baidu_39067385/article/details/119428908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JHY97

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值