第二章 webpack处理样式资源

webpack 只能理解 JavaScript 和 JSON 文件，Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。样式资源文件：Css、Less、Sass、Scss、Styl

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用官方文档找不到的话，可以从社区 Github 中搜索查询。

Webpack5-loader

---

处理CSS资源

1、需要的loader

• css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块
• style-loader: 动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i css-loader style-loader -D
1

3、配置loader

  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10

注意：use 数组里面 Loader 执行顺序是从右到左，先加载的是css-loader最后才是style-loader。

---

处理less资源

1、需要的loader

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

• css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块

• style-loader: 动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i less-loader -D
1

css-loader 、style-loader也是必要的依赖包，如果没有下载需要下载。

3、配置loader

module: {
    rules: [
      {
        // 用来匹配 .less 结尾的文件
        test: /\.less$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10

这里的loader执行顺序：less-loader ===> css-loader ===> style-loader

---

处理 Sass 和 Scss 资源

1、需要的loader

• sass-loader:负责将 Less 文件编译成 Css 文件

• sass: sass-loader 依赖 sass 进行编译

• css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块

• style-loader: 动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i sass-loader sass -D
1

css-loader 、style-loader也是必要的依赖包，如果没有下载需要下载。

3、配置loader

module: {
    rules: [
      {
        // 用来匹配 .sass/.scss 结尾的文件
        test: /\.s[ac]ss$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10

这里的loader执行顺序：sass-loader ===> css-loader ===> style-loader

---

处理Styl资源

1、需要的loader

• stylus-loader:负责将 Styl 文件编译成 Css 文件

• css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块

• style-loader: 动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i stylus-loader -D
1

css-loader 、style-loader也是必要的依赖包，如果没有下载需要下载。

3、配置loader

module: {
    rules: [
      {
        // 用来匹配 .styl 结尾的文件
        test: /\.styl$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10

这里的loader执行顺序：stylus-loader ===> css-loader ===> style-loader

---

处理所有样式资源

处理所有样式资源只需要将上述loader全部下载并添加到配置文件即可。

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        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"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

最后你可以创建你的样式资源文件，并引入main.js中，然后执行npx webpack到浏览器查看样式是否生效即可。