园龄：3年4个月粉丝：6 关注：0

webpack5基础

基本使用

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

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

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

我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的:

开发模式：仅能编译 JS 中的 ES Module 语法
生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

开始使用

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

count.js

1 export default function count(x, y) {
2   return x - y;
3 }

sum.js

1 export default function sum(...args) {
2   return args.reduce((p, c) => p + c, 0);
3 }

main.js

1 import count from "./js/count";
2 import sum from "./js/sum";
3 
4 console.log(count(2, 1));
5 console.log(sum(1, 2, 3, 4));

3. 下载依赖

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

初始化package.json

npm init -y

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

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

下载依赖

npm i webpack webpack-cli -D

4. 启用 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. 观察输出文件

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

基本配置

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

5 大核心概念

entry（入口）

指示 Webpack 从哪个文件开始打包

outpu t（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

plugins（插件）

扩展 Webpack 的功能

mode（模式）

主要由两种模式：

开发模式：development
生产模式：production

准备 Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

 1 module.exports = {
 2   // 入口
 3   entry: "",
 4   // 输出
 5   output: {},
 6   // 加载器
 7   module: {
 8     rules: [],
 9   },
10   // 插件
11   plugins: [],
12   // 模式
13   mode: "",
14 };

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

修改配置文件

配置文件

 1 // Node.js的核心模块，专门用来处理文件路径
 2 const path = require("path");
 3 
 4 module.exports = {
 5   // 入口
 6   // 相对路径和绝对路径都行
 7   entry: "./src/main.js",
 8   // 输出
 9   output: {
10     // path: 文件输出目录，必须是绝对路径
11     // path.resolve()方法返回一个绝对路径
12     // __dirname 当前文件的文件夹绝对路径
13     path: path.resolve(__dirname, "dist"),
14     // filename: 输出文件名
15     filename: "main.js",
16   },
17   // 加载器
18   module: {
19     rules: [],
20   },
21   // 插件
22   plugins: [],
23   // 模式
24   mode: "development", // 开发模式
25 };

运行指令

npx webpack

此时功能和之前一样，也不能处理样式资源

开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

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

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

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

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

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

处理样式资源

本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源

介绍

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

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

官方文档找不到的话，可以从社区 Github 中搜索查询

Webpack 官方 Loader 文档

处理 Css 资源

1. 下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

2. 功能介绍

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

3. 配置

使用loader：xxxx只能加载一个，使用use[xxx,xxx]可以加载多个

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4. 添加 Css 资源

src/css/index.css

.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

src/main.js

import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

处理 Less 资源

1. 下载包

npm i less-loader -D

2. 功能介绍

less-loader：负责将 Less 文件编译成 Css 文件

3. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

其他css预编译也是同样的用法

处理图片资源

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

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

1. 配置

 1 const path = require("path");
 2 
 3 module.exports = {
 4   entry: "./src/main.js",
 5   output: {
 6     path: path.resolve(__dirname, "dist"),
 7     filename: "main.js",
 8   },
 9   module: {
10     rules: [29       {
30         // 处理图片
31         test: /\.(png|jpe?g|gif|webp)$/,
32         type: "asset",
33       },
34     ],
35   },
36   plugins: [],
37   mode: "development",
38 };

2. 添加图片资源

src/images/1.jpeg
src/images/2.png
src/images/3.gif

3. 使用图片资源

src/less/index.less

1 .box2 {
2   width: 100px;
3   height: 100px;
4   background-image: url("../images/1.jpeg");
5   background-size: cover;
6 }

src/sass/index.sass

.box3
  width: 100px
  height: 100px
  background-image: url("../images/2.png")
  background-size: cover

src/styl/index.styl

.box5
  width 100px
  height 100px
  background-image url("../images/3.gif")
  background-size cover

4. 运行指令

npx webpack

打开 index.html 页面查看效果

5. 输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来

6. 对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

 1 const path = require("path");
 2 
 3 module.exports = {
 4   entry: "./src/main.js",
 5   output: {
 6     path: path.resolve(__dirname, "dist"),
 7     filename: "main.js",
 8   },
 9   module: {
10     rules: [
11 29       {
30         test: /\.(png|jpe?g|gif|webp)$/,
31         type: "asset",
32         parser: {
33           dataUrlCondition: {
34           //注意，转化为base64后图片无法打包到指定文件夹目录
35             maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
36           }
37         }
38       },
39     ],
40   },
41   plugins: [],
42   mode: "development",
43 };

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

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了（注意：需要将上次打包生成的文件清空，再重新打包才有效果）

自动清空上次打包资源

1. 配置

 1 const path = require("path");
 2 
 3 module.exports = {
 4   entry: "./src/main.js",
 5   output: {
 6     path: path.resolve(__dirname, "dist"),
 7     filename: "static/js/main.js",
 8     clean: true, // 自动将上次打包目录资源清空
 9   },
10   module: {
11     rules: [
12 47     ],
48   },
49   plugins: [],
50   mode: "development",
51 };

2. 运行指令

npx webpack

观察 dist 目录资源情况

处理字体图标资源

1 {
2         test: /\.(ttf|woff2?)$/,
3         type: "asset/resource",
4         generator: {
5           filename: "static/media/[hash:8][ext][query]",
6         },
7       },

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

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

处理其他资源

开发中可能还存在一些其他资源，如音视频等，我们也一起处理了

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

处理 js 资源

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

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

Babel

JavaScript 编译器。

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

1. 配置文件

配置文件由很多种写法：

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

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置

我们以 babel.config.js 配置文件为例：

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

presets 预设

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

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

3. 在 Webpack 中使用

下载包

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

定义 Babel 配置文件

babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

修改 js 文件代码

main.js

 1 import count from "./js/count";
 2 import sum from "./js/sum";
 3 // 引入资源，Webpack才会对其打包
 4 import "./css/iconfont.css";
 5 import "./css/index.css";
 6 import "./less/index.less";
 7 import "./sass/index.sass";
 8 import "./sass/index.scss";
 9 import "./styl/index.styl";
10 
11 const result1 = count(2, 1);
12 console.log(result1);
13 const result2 = sum(1, 2, 3, 4);
14 console.log(result2);

配置

webpack.config.js

1  {
2         test: /\.js$/,
3         exclude: /node_modules/, // 排除node_modules代码不编译
4         loader: "babel-loader",
5       },

处理 Html 资源

在public中的index.html中不需要再手动引入js文件了，安装插件，他会把html文件也打包，然后在里面自动引入。

1. 下载包

npm i html-webpack-plugin -D

2. 配置

webpack.config.js

 1 const path = require("path");
 3 const HtmlWebpackPlugin = require("html-webpack-plugin");
 4 
 5 module.exports = {
 6   entry: "./src/main.js",
 7   output: {
 8     path: path.resolve(__dirname, "dist"),
 9     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
10     clean: true, // 自动将上次打包目录资源清空
11   },
12   module: {
13     rules: [
14 61     ],
62   },
63   plugins: [
64    
70     new HtmlWebpackPlugin({
71       // 以 public/index.html 为模板创建文件
72       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
73       template: path.resolve(__dirname, "public/index.html"),
74     }),
75       
76       
77   ],
78   mode: "development",
79 };

3. 修改 index.html

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
  </body>
</html>

4. 运行指令

npx webpack

此时 dist 目录就会输出一个 index.html 文件

开发服务器&自动化

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

1. 下载包

npm i webpack-dev-server -D

2. 配置

webpack.config.js

 1 const path = require("path");
 2 const ESLintWebpackPlugin = require("eslint-webpack-plugin");
 3 const HtmlWebpackPlugin = require("html-webpack-plugin");
 4 
 5 module.exports = {
 6   entry: "./src/main.js",
 7   output: {
 8     path: path.resolve(__dirname, "dist"),
 9     filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
10     clean: true, // 自动将上次打包目录资源清空
11   },
12   module: {
13     rules: [
14 61     ],
62   },
63   plugins: [
64    68     new HtmlWebpackPlugin({
69       // 以 public/index.html 为模板创建文件
70       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
71       template: path.resolve(__dirname, "public/index.html"),
72     }),
73   ],
74   // 开发服务器
75   devServer: {
76     host: "localhost", // 启动服务器域名
77     port: "3000", // 启动服务器端口号
78     open: true, // 是否自动打开浏览器
79   },
80   mode: "development",
81 };

3. 运行指令

npx webpack serve

注意运行指令发生了变化

并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

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

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

生产模式准备

我们分别准备两个配置文件来放不同的配置

1. 文件目录

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

2. 修改 webpack.dev.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: undefined, // 开发模式没有输出，不需要指定输出目录
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
// clean: true, // 开发模式没有输出，不需要清空输出结果
},
module: {
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?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
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",
};

运行开发模式的指令：

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

3. 修改 webpack.prod.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, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    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?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      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.prod.js

4. 配置运行指令

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

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

以后启动指令：

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

Css 处理

提取 Css 成单独文件

在生产环境下

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

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

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

1. 下载包

npm i mini-css-extract-plugin -D

2. 配置

webpack.prod.js

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-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: [
        // 用MiniCssExtractPlugin代替styleloader，才能实现link标签引入css 
        
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

    ],
  },
  plugins: [
   // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
      
      
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

3. 运行指令

npm run build

Css 兼容性处理

针对不同的浏览器

1. 下载包

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

2. 配置

{
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
            
        // 要放在cssloader后面
            
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
              
              
              
          },
        ],
      },

3. 控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

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

想要知道更多的 browserslist 配置，查看browserslist 文档

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
    
    //或者这样写
    "browserslist":{
    "development": [
      "last 3 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
  //默认是生产环境
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ]
  }
}

Css 压缩

1. 下载包

npm i css-minimizer-webpack-plugin -D

2. 配置

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



// css压缩
    new CssMinimizerPlugin(),

上一篇webpack5进阶

本文作者：云川

本文链接：https://www.cnblogs.com/zychuan/p/16705153.html

posted @ 2022-09-18 16:27 yunChuans 阅读(66) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

基本使用

功能介绍

开始使用

1. 资源目录

2. 创建文件

3. 下载依赖

4. 启用 Webpack

5. 观察输出文件

基本配置

5 大核心概念

准备 Webpack 配置文件

修改配置文件

开发模式介绍

处理样式资源

介绍

处理 Css 资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加 Css 资源

5. 运行指令

处理 Less 资源

1. 下载包

2. 功能介绍

3. 配置

其他css预编译也是同样的用法

处理图片资源

1. 配置

2. 添加图片资源

3. 使用图片资源

4. 运行指令

5. 输出资源情况

6. 对图片资源进行优化

自动清空上次打包资源

1. 配置

2. 运行指令

处理字体图标资源

处理其他资源

处理 js 资源

Babel

1. 配置文件

2. 具体配置

3. 在 Webpack 中使用

处理 Html 资源

1. 下载包

2. 配置

3. 修改 index.html

4. 运行指令

开发服务器&自动化

1. 下载包

2. 配置

3. 运行指令

生产模式介绍

生产模式准备

1. 文件目录

2. 修改 webpack.dev.js

3. 修改 webpack.prod.js

4. 配置运行指令

Css 处理

提取 Css 成单独文件

1. 下载包

2. 配置

3. 运行指令

Css 兼容性处理

1. 下载包

2. 配置

3. 控制兼容性

Css 压缩

1. 下载包

2. 配置

公告

搜索

常用链接

合集

随笔档案