• webpack5基础--04_处理样式资源

    处理样式资源

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

    介绍

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

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

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

    Webpack 官方 Loader 文档

    处理 Css 资源

    1. 下载包

    npm i css-loader style-loader -D

    • 1

    注意：需要下载两个 loader

    2. 功能介绍

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

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

    3. 配置

    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",
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    4. 添加 Css 资源

    • src/css/index.css
    .box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 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));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 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>webpack5title>
  head>
  <body>
    <h1>Hello Webpack5h1>
    
    <div class="box1">div>
    
    <script src="../dist/main.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    5. 运行指令

    npx webpack

    • 1

    打开 index.html 页面查看效果

    处理 Less 资源

    1. 下载包

    npm i less-loader -D

    • 1

    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: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-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

    4. 添加 Less 资源

    • src/less/index.less
    .box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • src/main.js
    import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 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>webpack5title>
  head>
  <body>
    <h1>Hello Webpack5h1>
    <div class="box1">div>
    <div class="box2">div>
    <script src="../dist/main.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    5. 运行指令

    npx webpack

    • 1

    打开 index.html 页面查看效果

    处理 Sass 和 Scss 资源

    1. 下载包

    npm i sass-loader sass -D

    • 1

    注意：需要下载两个

    2. 功能介绍

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

    3. 配置

    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"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-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

    4. 添加 Sass 资源

    • src/sass/index.sass
    /* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink

    • 1
    • 2
    • 3
    • 4
    • 5
    • src/sass/index.scss
    .box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • src/main.js
    import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 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>webpack5title>
  head>
  <body>
    <h1>Hello Webpack5h1>
    <div class="box1">div>
    <div class="box2">div>
    <div class="box3">div>
    <div class="box4">div>
    <script src="../dist/main.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    5. 运行指令

    npx webpack

    • 1

    打开 index.html 页面查看效果

    处理 Styl 资源

    1. 下载包

    npm i stylus-loader -D

    • 1

    2. 功能介绍

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

    3. 配置

    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"],
      },
      {
        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
    • 32
    • 33

    4. 添加 Styl 资源

    • src/styl/index.styl
    /* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink

    • 1
    • 2
    • 3
    • 4
    • 5
    • src/main.js
    import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 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>webpack5title>
  head>
  <body>
    <h1>Hello Webpack5h1>
    
    <div class="box1">div>
    <div class="box2">div>
    <div class="box3">div>
    <div class="box4">div>
    <div class="box5">div>
    <script src="../dist/main.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    5. 运行指令

    npx webpack

    • 1

    打开 index.html 页面查看效果

  • 相关阅读:
    怎么申报高新？流程是什么？？
    微信小程序 springboot旅游景点门票预订服务系统
    【题解】P8817 [CSP-S 2022] 假期计划（bfs，dfs）
    计算机网络（四）：网络层
    内网渗透之内网信息收集（综合）
    Java mysql 双数据源
    Neo4j 基本语法
    微服务实战 06 seata 搭建与集成SpringCloud Alibaba
    SpringBoot事务详解
    Ngunx + Tomcat 负载均衡和动态分离
  • 原文地址：https://blog.csdn.net/qq_35940731/article/details/136442585