WebPack5进阶使用总结(二)

WebPack5进阶使用总结

  • 1、处理js资源
    • 1.1、Eslint
    • 1.2、在webpack中使用Eslint
    • 1.3、Babel
    • 1.4、在webpack中使用
  • 2、处理HTML资源
  • 3、开发服务器&自动化
  • 4、生产模式介绍
  • 5、Css处理
    • 5.1、Css兼容性处理
    • 5.2、合并配置
    • 5.3、Css压缩

配套视频：尚硅谷Webpack5入门到原理

配套代码：https://gitee.com/Augenstern-creator/kuang-study-web-pack5
在这里插入图片描述

1、处理js资源

Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

  • 针对 js 兼容性处理，我们使用 Babel 来完成
  • 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

1.1、Eslint

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

配置文件有很多种写法：

  • .eslintrc.*：新建文件，位于项目根目录
    • .eslintrc
    • .eslintrc.js
    • .eslintrc.json
    • 区别在于配置格式不一样
  • package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可，我们以 .eslintrc.js 配置文件为例，先简单看下部分配置：

module.exports = {// 解析选项parserOptions: {},// 具体检查规则rules: {},// 继承其他规则extends: [],// ...// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

parserOptions 解析选项

parserOptions: {ecmaVersion: 6, // ES 语法版本sourceType: "module", // ES 模块化ecmaFeatures: { // ES 其他特性jsx: true // 如果是 React 项目，就需要开启 jsx 语法}
}

rules 具体规则

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
rules: {semi: "error", // 禁止使用分号'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告'default-case': ['warn', // 要求 switch 语句中有 default 分支，否则警告{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了],eqeqeq: ['warn', // 强制使用 === 和 !==，否则警告'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告],
}

extends 继承：开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则，现有以下较为有名的规则：

  • Eslint 官方的规则open in new window：eslint:recommended
  • Vue Cli 官方的规则open in new window：plugin:vue/essential
  • React Cli 官方的规则open in new window：react-app
// 例如在React项目中，我们可以这样写配置
module.exports = {extends: ["react-app"],rules: {// 我们的规则会覆盖掉react-app的规则// 所以想要修改规则直接改就是了eqeqeq: ["warn", "smart"],},
};

1.2、在webpack中使用Eslint

在这里插入图片描述

  1. 下载包eslint-webpack-plugin、eslint
npm i eslint-webpack-plugin eslint -D
  1. 在项目根目录创建 .eslintrc.js 文件
module.exports = {// 继承 Eslint 规则extends: ["eslint:recommended"],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6, // es6sourceType: "module", // es6 模块化},rules: {"no-var": 2, // 不能使用 var 定义变量},
};
  1. 在 webpack.config.js 中引入插件
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
  1. 在 webpack.config.js 中配置
// 插件
plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹,因为src 是我们写代码的地方)context: path.resolve(__dirname, "src"),}),
],

VsCode Eslint插件

  • 打开 VSCode，下载 Eslint 插件，就可以在写代码的时候检查编码错误

  • 但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

  • 所以可以使用 Eslint 忽略文件解决。在项目根目录新建· .eslintignore

    # 忽略dist目录下所有文件
dist

1.3、Babel

JavaScript 编译器：主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

Babel的配置文件有很多种写法：

  • babel.config.* ：新建文件，位于项目根目录
    • babel.config.js
    • babel.config.json
  • .babelrc.* ： 新建文件，位于项目根目录
    • .babelrc
    • .babelrc.js
    • .babelrc.json
  • package.json 中的babel： 不需要新建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可，我们以 babel.config.js 配置文件为例：

module.exports = {// 预设presets: [],
};

presets 预设：就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

1.4、在webpack中使用

  1. 下载包
npm i babel-loader @babel/core @babel/preset-env -D
  1. 在项目根目录下创建babel.config.js
module.exports = {// 智能预设:能编译ES6的语法presets: ["@babel/preset-env"],
};
  1. 在 webpack.config.js 中配置
{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译use: {loader: "babel-loader",}
},

2、处理HTML资源

  1. 下载包
npm i html-webpack-plugin -D
  1. 在 webpack.config.js 中引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
  1. 在 webpack.config.js 中进行配置
plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "public/index.html"),}),],
  1. 运行指令
npx webpack

在 dist 下会自动生成 index.html 文件，里面自动引入打包后的 js 文件

在这里插入图片描述

3、开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化。

  1. 下载包
npm i webpack-dev-server -D
  1. 在 webpack.config.js 中进行配置
  // 开发服务器 devServer 和 mode 在同一级别devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: "development",
  1. 运行指令
npx webpack serve

注意运行指令发生了变化

并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道

4、生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:

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

我们需要准备两个配置文件来放不同的配置，在项目根目录下新建：

  • config/webpack.dev.js : 开发环境
  • config/webpack.prod.js ：生产环境

修改 webpack.dev.js ，因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件，相对路径不用变

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录，必须是绝对路径path: undefined, // 开发模式没有输出,不需要指定输出路径// filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中//clean: true, // 开发模式没有输出,不需要清空输出结果},// 加载器module: {// loader的配置rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{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|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]",},},{// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译use: {loader: "babel-loader",}},],},// 插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹)context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// 开发服务器devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器},// 模式mode: "development", // 开发模式
};

webpack.prod.js 生产模式内容如下：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录，必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "../dist"),   // 生产模式需要输出// filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},// 加载器module: {// loader的配置rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: ["style-loader", "css-loader"],},{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|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]",},},{// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译use: {loader: "babel-loader",}},],},// 插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹)context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),],// 开发服务器//devServer: {//  host: "localhost", // 启动服务器域名//  port: "3000", // 启动服务器端口号//  open: true, // 是否自动打开浏览器//},// 模式mode: "production", // 生产模式
};

这样我们运行开发模式和生产模式的指令分别为：

# 开发模式
npx webpack --config ./config/webpack.dev.js# 生产模式
npx webpack --config ./config/webpack.prod.js

为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面：

"scripts": {"start": "npm run dev","dev": "npx webpack serve --config ./config/webpack.dev.js","build": "npx webpack --config ./config/webpack.prod.js","test": "echo \"Error: no test specified\" && exit 1",
},

这样以后启动指令就变成：

  • 开发模式
npm start  
# 或
npm run dev
  • 生产模式
npm run build

5、Css处理

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样对于网站来说，会出现闪屏现象，用户体验不好，我们应该是单独的 Css 文件，通过 link 标签加载性能才好

  1. 下载包
npm i mini-css-extract-plugin -D
  1. 在 webpack.prod.js 引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  1. 在 webpack.prod.js 中配置
    • 要将所有的 "style-loader" 替换成 MiniCssExtractPlugin.loader
    • 同时需要提取css成单独文件
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录，必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "../dist"),   // 生产模式需要输出// filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},// 加载器module: {// loader的配置rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左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|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]",},},{// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译use: {loader: "babel-loader",}},],},// 插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹)context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),],// 开发服务器//devServer: {//  host: "localhost", // 启动服务器域名//  port: "3000", // 启动服务器端口号//  open: true, // 是否自动打开浏览器//},// 模式mode: "production", // 生产模式
};
  1. 运行命令
# 启动生产模式
npm run build

5.1、Css兼容性处理

  1. 下载包
npm i postcss-loader postcss postcss-preset-env -D
  1. 在 webpack.prod.js 中进行配置
    • 在 "css-loader" 后 和 "less-loader" 前配置
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录，必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "../dist"),   // 生产模式需要输出// filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},// 加载器module: {// loader的配置rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader, "css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, "css-loader", {loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},"less-loader"],},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader, "css-loader", {loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},"sass-loader"],},{test: /\.styl$/,use: [MiniCssExtractPlugin.loader, "css-loader", {loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},"stylus-loader"],},{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]",},},{// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译use: {loader: "babel-loader",}},],},// 插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹)context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),],// 开发服务器//devServer: {//  host: "localhost", // 启动服务器域名//  port: "3000", // 启动服务器端口号//  open: true, // 是否自动打开浏览器//},// 模式mode: "production", // 生产模式
};
  1. 控制兼容性
    • 我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度
{// 其他省略// last 2 version 无论什么浏览器,只兼容最近的两个版本// > 1%,覆盖99%的浏览器// not dead 不要已经死了的浏览器"browserslist": ["last 2 version", "> 1%", "not dead"]
}

5.2、合并配置

为了提高代码复用性，我们使用一个方法来处理我们的 loader，在 webpack.prod.js 中修改：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {return [MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);
};module.exports = {// 入口// 相对路径和绝对路径都行entry: "./src/main.js",// 输出output: {// path: 文件输出目录，必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, "../dist"),   // 生产模式需要输出// filename: 输出文件名,入口文件打包输出到 `static/js/main.js`中,其他文件仍打包到上方 path 下filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},// 加载器module: {// loader的配置rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use:getStyleLoaders("less-loader"),},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader"),},{test: /\.styl$/,use:getStyleLoaders("stylus-loader"),},{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]",},},{// 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了test: /\.(ttf|woff2?|map4|map3|avi)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译use: {loader: "babel-loader",}},],},// 插件plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹)context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),],// 开发服务器//devServer: {//  host: "localhost", // 启动服务器域名//  port: "3000", // 启动服务器端口号//  open: true, // 是否自动打开浏览器//},// 模式mode: "production", // 生产模式
};

5.3、Css压缩

  1. 下载包
npm i css-minimizer-webpack-plugin -D
  1. 在 webpack.prod.js中引入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  1. 在 webpack.prod.js中配置
// 插件
plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录(这里检查 src 文件夹)context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),// css压缩new CssMinimizerPlugin(),
],
  1. 运行指令
npm run build

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/144108.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32H7系列MPU与CACHE以及RAM

STM32H7系列MPU与CACHE以及RAM

一、启用cache 启用cache很简单，就是这两句，分别打开I-Cache和D-Cache，但是如果只使用这两句，再操作DMA和FLASH时就很有可能遇到问题，后面会具体说明。 SCB_EnableICache();//使能I-CacheSCB_EnableDCache();//使能D-…
阅读更多...
Android studio “Layout Inspector“工具在Android14 userdebug设备无法正常使用

Android studio “Layout Inspector“工具在Android14 userdebug设备无法正常使用

背景描述 做rom开发的都知道，“Layout Inspector”和“Attach Debugger to Android Process”是studio里很好用的工具，可以用来查看布局、调试系统进程（比如setting、launcher、systemui）。 问题描述 最进刚开始一个Android 14…
阅读更多...
现代数据架构-湖仓一体

现代数据架构-湖仓一体

当前的数据架构已经从数据库、数据仓库，发展到了数据湖、湖仓一体架构，本篇文章从头梳理了一下数据行业发展的脉络。 上世纪，最早出现了关系型数据库，也就是DBMS，有商业的Oracle、 IBM的DB2、Sybase、Informix、 微软…
阅读更多...
【数据结构初阶】六、线性表中的队列（链式结构实现队列）

【数据结构初阶】六、线性表中的队列（链式结构实现队列）

相关代码gitee自取： C语言学习日记: 加油努力 (gitee.com) 接上期： 【数据结构初阶】五、线性表中的栈（顺序表实现栈）_高高的胖子的博客-CSDN博客 1 . 队列（Queue） 队列的概念和结构： 队列…
阅读更多...
PSINS工具箱学习（一）下载安装初始化、SINS-GPS组合导航仿真、习惯约定与常用变量符号、数据导入转换、绘图显示

PSINS工具箱学习（一）下载安装初始化、SINS-GPS组合导航仿真、习惯约定与常用变量符号、数据导入转换、绘图显示

原始 Markdown文档、Visio流程图、XMind思维导图见：https://github.com/LiZhengXiao99/Navigation-Learning 文章目录 一、前言二、相关资源三、下载安装初始化1、下载PSINSyymmdd.rar工具箱文件2、解压文件3、初始化4、启动工具箱导览 四、习惯约定与常用变量符号1…
阅读更多...
数据集笔记：2015上海地铁一卡通数据

数据集笔记：2015上海地铁一卡通数据

数据地址：上海地铁数据_免费高速下载|百度网盘-分享无限制 (baidu.com) 数据介绍 上海2015年几天的地铁一卡通出入站信息 卡号、交易日期、交易时间、公交线路/地铁站点中文名称、行业名称(公交、地铁、出租、轮渡、PR停车场)、交易金额、交易性质(非优惠、优惠、…
阅读更多...
No139.精选前端面试题，享受每天的挑战和学习

No139.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…
阅读更多...
RNN模型与NLP应用(1/9)：数据处理基础Data Processing Basics

RNN模型与NLP应用(1/9)：数据处理基础Data Processing Basics

文章目录 处理分类特征把分类特征转化为数值特征应用one-hot编码indice要从1开始而不能从0开始数据处理为什么使用one-hot向量 处理文本数据Step1：将文本分割成单词Step2：计算单词的频度按频度递减的方式排序 Step3：One-Hot编码 处理分类特征…
阅读更多...
UE5 ChaosVehicles载具研究

UE5 ChaosVehicles载具研究

一、基本组成 载具Actor类名称：WheeledVehiclePawn Actor最原始的结构 官方增加了两个摇臂相机，可以像驾驶游戏那样切换多机位、旋转观察 选择骨骼网格体、动画蓝图类、开启物理模拟 二、SportsCar_Pawn 角阻尼：物体旋转的阻力。数值越大…
阅读更多...
前端架构师之02_ES6_高级

前端架构师之02_ES6_高级

1 类和继承 1.1 class类 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。 // ES5 创建对象 // 创建一个类，用户名 密码 function User(name,pass){// 添加属性this.name name;this.pass pass; } // 用 原型 添加方法 User.prototype.sho…
阅读更多...
Docker下如何构建包含延迟插件的RabbitMQ镜像

Docker下如何构建包含延迟插件的RabbitMQ镜像

👨🏻‍💻 热爱摄影的程序员 👨🏻‍🎨 喜欢编码的设计师 🧕🏻 擅长设计的剪辑师 🧑🏻‍🏫 一位高冷无情的编码爱好者 大家好，我是 DevO…
阅读更多...
FIPS 140简介

FIPS 140简介

FIPS 140（Federal Information Processing Standards Publication 140）是美国联邦政府颁布的一系列密码学标准，用于评估和验证安全模块（如加密模块）的安全性。FIPS 140标准制定了一系列安全要求，以确保加密模块能够提供足够的安全性，以保护敏感数据。 与AES的关系是，A…
阅读更多...
UE5 虚幻引擎 如何使用构造脚本（Construction Script）？ 构造脚本的奥秘！

UE5 虚幻引擎 如何使用构造脚本（Construction Script）？ 构造脚本的奥秘！

目录 1 构造脚本（Construction Script）1.1 介绍1.2 案例1：利用样条组件程序化生成树木1.2 案例2：利用样条组件和样条网格体组件程序化生成道路 1 构造脚本（Construction Script） 1.1 介绍 问题&#xff1a…
阅读更多...
3D孪生场景搭建：模型阵列摆放

3D孪生场景搭建：模型阵列摆放

阵列摆放概念 阵列摆放是指将物体、设备或元件按照一定的规则和间距排列组合的方式。在工程和科学领域中，阵列式摆放常常用于优化空间利用、提高效率或增强性能。 阵列摆放通常需要考虑间距、角度、方向、对称性等因素，以满足特定的要求和设计目标。不同…
阅读更多...
江西广电会展集团总经理李悦一行莅临拓世科技集团调研参观，科技璀璨AIGC掀新潮

江西广电会展集团总经理李悦一行莅临拓世科技集团调研参观，科技璀璨AIGC掀新潮

在江西这片充满活力的土地上，数字经济如潮水般涌动，会展文化与科技的完美结合，正如新时代的璀璨繁星照亮夜空，更预示着一场AIGC创新的壮丽篇章即将展开。作为拓世科技集团的老朋友，江西广电多位领导多次莅临拓世科技集…
阅读更多...
Elasticsearch：与多个 PDF 聊天 | LangChain Python 应用教程（免费 LLMs 和嵌入）

Elasticsearch：与多个 PDF 聊天 | LangChain Python 应用教程（免费 LLMs 和嵌入）

在本博客中，你将学习创建一个 LangChain 应用程序，以使用 ChatGPT API 和 Huggingface 语言模型与多个 PDF 文件聊天。 如上所示，我们在最最左边摄入 PDF 文件，并它们连成一起，并分为不同的 chunks。我们可以通过使用 …
阅读更多...
项目集成七牛云存储sdk

项目集成七牛云存储sdk

以PHP为例 第一步：下载sdk PHP SDK_SDK 下载_对象存储 - 七牛开发者中心 sdk下载成功之后，将sdk放入项目中，目录选择以自己项目实际情况而定。 注意：在examples目录中有各种上传文件的参考示例，这里我们主要参考的是…
阅读更多...
如何注册一个 DA 为 10 的高价值老域名

如何注册一个 DA 为 10 的高价值老域名

众所周知，由于域名存在唯一性，随着人们注册的越多，好域名也变得越来越少，渐渐成为稀缺的网络资源。这个时候要想拥有好的域名，抢注优质老域名就成了广大米友的路径之一。 优质的高价值域名都有一个特点，那…
阅读更多...
MySQL数据库入门到精通1--基础篇(MySQL概述，SQL)

MySQL数据库入门到精通1--基础篇(MySQL概述，SQL)

1. MySQL概述 1.1 数据库相关概念 目前主流的关系型数据库管理系统： Oracle：大型的收费数据库，Oracle公司产品，价格昂贵。 MySQL：开源免费的中小型数据库，后来Sun公司收购了MySQL，而Oracle又收…
阅读更多...
如何快速学习AdsPower RPA（2）——中级、高级部分

如何快速学习AdsPower RPA（2）——中级、高级部分

Tool哥继续给大家分享快速学习AdsPower RPA的方法。上一篇在这里，还没看过的小伙伴赶快补课去：如何快速学习AdsPower RPA（1）——简单、进阶部分 能进入到中级、高级阶段的学习，说明你自学能力超强！只要跟着…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发