Webpack5 教程（2） -- 样式处理

已于 2023-01-18 17:04:53 修改
阅读量895 收藏
点赞数 1
分类专栏： Webpack5 教程 文章标签： webpack 前端 javascript
于 2023-01-18 11:24:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63358859/article/details/128724258
版权

目录

介绍

处理 Css 资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加 Css 资源

5. 运行指令

处理 Less 资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加 Less 资源

5. 运行指令

处理 Sass 和 Scss 资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加 Sass 资源

5. 运行指令

处理 Styl 资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加 Styl 资源

5. 运行指令

介绍

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

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

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

Webpack 官方 Loader 文档open in new window

处理 Css 资源

1. 下载包

npm i css-loader style-loader -D

注意：需要下载两个 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",
};

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

4. 添加 Less 资源

  • src/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}
  • 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));
  • 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>
    <div class="box1"></div>
    <div class="box2"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

处理 Sass 和 Scss 资源

1. 下载包

npm i sass-loader sass -D

注意：需要下载两个

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

4. 添加 Sass 资源

  • src/sass/index.sass
/* 可以省略大括号和分号 */
.box3
  width: 100px
  height: 100px
  background-color: hotpink
  • src/sass/index.scss
.box4 {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}
  • 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));
  • 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>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

处理 Styl 资源

1. 下载包

npm i stylus-loader -D

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

4. 添加 Styl 资源

  • src/styl/index.styl
/* 可以省略大括号、分号、冒号 */
.box 
  width 100px 
  height 100px 
  background-color pink
  • 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));
  • 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>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <script src="../dist/main.js"></script>
  </body>
</html>

5. 运行指令

npx webpack

打开 index.html 页面查看效果

总结

  • dependencies：项目依赖。在编码阶段和呈现页面阶段都需要的，也就是说，项目依赖即在开发环境中，又在生产环境中。如js框架vue、页面路由vue-router，各种ui框架antd、element-ui、vant等。
  • devDependencies: 开发依赖。仅仅在写代码过程中需要使用，比如css预处理器、vue-cli脚手架、eslint之类。
  • 后面部分为–save -dev 的情况会使得下载的插件放在package.json文件的devDpendencies对象里面
  • 后面部分为–save的情况会使得下载的插件放在package.json文件的dependencies对象里面

 区别

  • devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；
  • dependencies是我们线上(生产坏境)下所要依赖的包，比如vue，我们线上时必须要使用的，所以要放在dependencies下；dependencies依赖的包不仅开发环境能使用，生产环境也能使用 
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry: "./src/main.js",
    // 输出
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        path: path.resolve(__dirname, "dist"),
        // filename: 输出文件名
        filename: "main.js",
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i,//只检测css文件
                use: [//执行顺序从下到上（从右到左）
                    "style-loader",//将js中css通过创建style到标签添加到html文件中生效
                    "css-loader"//将css资源编译成commonjs的模块到js中

                ],

            },
            {
                test: /\.less$/i,
                //loader:xxx 只能使用一个loader 
                use: [//use使用多个loader
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
            },
        ],
    },
    // 插件
    plugins: [],
    // 模式
    mode: "development", // 开发模式
};

前端 贾公子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack5基础篇 —— 处理样式资源
qq_45297320的博客
02-12 136
webpack本身是不能识别样式资源的，所以我们要借助loader来帮助webpack解析样式资源，我们找loader都应该去官方文档中找到对应的loader，然后使用，官方找不到的话，可以从社区github中搜索查询。配置成功后，运行npx webpack，然后发现打包成功，样式也被打包进main.js文件，index.html中也插入了style标签，页面样式也生效了。你会发现打包失败，提示告诉我们需要下载对应的loader去处理css样式文件，那接下来我们看看如何配置css-loader。
webpack基本的配置
读心悦
07-06 3165
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
stylus详解与引入
wangbo_angel的博客
05-08 892
Stylus 是一个基于 Node.js 的 CSS 预处理器，它允许开发者以一种类似于脚本的方式编写 CSS 代码，从而创建出更加健壮、动态和富有表现力的样式表。2. 在 Vue 组件的 `` 标签上添加 `lang="stylus"` 属性，并且可以添加 `scoped` 属性以实现样式私有化。- Node.js：在 Node.js 项目中通过 `require` 或 `import` 引入 Stylus。- 通过标签链接：使用 `` 标签引入 `.styl` 文件。
webpack 编译stylus_Stylus系列——webpack-spritesmith配合stylus使用示例
weixin_27303545的博客
01-17 240
一、前言基于Webpack的CSS Sprites实现方案，若是直接在html中调用雪碧图图标已经很方便，但是实际开发过程可能遇到需要在伪元素中使用雪碧图，或者需要hover切换另一个图标，这种情况下就无法在css中直接调用图标类名。这时，就需要css预处理器，当然不限于stylus，less、sass都是可以的，本文介绍stylus方案。二、项目配置1. 目录结构预览+ node_modules...
Vue 中 安装 stylus
前端技术
01-21 1669
先说一下三个重要的地址： git：https://github.com/stylus/stylus stylus npm：https://www.npmjs.com/package/stylus stylus loader ：stylus-loader - npm 需要安装 stylus 和 stylus-loader，下面的命令直接全部安装 npm install stylus stylus-loader --save-dev 最后在文件 package.json devDepende...
关于可用版本的vue2的stylus-loader兼容版本
sensendedede的博客
01-10 548
1.在package.json的devDependencies里添加上可兼容可用版本。2.并再次使用指令安装。
Webpack简易教程
08-10
1. **模块**：Webpack 认为一切皆模块，它可以处理JavaScript文件，也可以处理样式表、图片、字体等。通过`import`或`require`语句，模块之间可以相互引用。 2. **入口（Entry）**：Webpack 打包的起点，定义了应用...
Webpack-101:Webpack（v2）教程
04-30
Webpack 把应用程序看作由多个模块组成，每个模块都可以是JavaScript文件、CSS样式表、图片或其他资源。它通过读取配置文件，将这些模块相互关联并进行优化，然后打包成一个或多个可部署的静态资源。 Webpack v2相...
Vue + Webpack + Vue-loader学习教程之功能介绍篇
08-31
2. **加载器（Loaders）**：Webpack 通过加载器转换不同类型的模块，如 Babel Loader 转换 ES6 语法，Style Loader 处理 CSS。 3. **插件（Plugins）**：进一步扩展 Webpack 功能，如自动优化、压缩代码、处理图片等...
Webpack中css-loader和less-loader的使用教程
08-30
在处理CSS时，Webpack 提供了 `css-loader` 和 `less-loader` 这样的加载器来帮助我们集成CSS和LESS样式到项目中。本教程将详细介绍这两个加载器的使用方法。 ### 1. `css-loader` `css-loader` 的主要作用是在...
Qt 动态加载.qrc文件
qq_22343907的博客
12-08 1704
1、生成.qrc文件； 2、将.qrc文件生成.rcc文件:rcc --binary test.qrc -o test.rcc； 3、程序中添加 QResource::registerResource()加载.rcc问价。 其余即像使用.qrc那样使用了。 ...
Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源
youyacoder的博客
07-15 708
主要讲解webpack 5 如何高效处理CSS 资源、scss/sass 资源、less 资源、 stylus 资源
探索Stylus Loader：将CSS提升到新的层次
gitblog_00038的博客
04-17 860
探索Stylus Loader：将CSS提升到新的层次 项目地址:https://gitcode.com/webpack-contrib/stylus-loader 在前端开发中，我们经常寻求更有效、更灵活的方式来管理和组织我们的样式代码。Stylus Loader就是这样的一款工具，它是Webpack生态的一部分，可以帮助我们充分利用Stylus的强大功能。 项目简介 Stylus Loader...
6-5 css样式隔离
bus_lupe的博客
04-11 1853
css modules webpack shadow dom <div id="box1"></div> <div id="box2"></div> <script> const box1 = document.getElementById('box1') // 开启shadow dom模式 const shadow1 = box1.attachShadow({mod..
webpack 编译stylus_Webpack 教程：加载样式文件
weixin_33840959的博客
01-09 352
默认情况下，Webpack 不支持处理样式文件，需要借助于 loader 和 插件。加载 CSS 文件要加载 css 文件，我们需要css-loader和style-loader.css-loader 会在所有匹配到的文件中查找@import和url()语句，并将它们当成普通的 import 语句来处理。如果@import语句指向了一个外部资源，比如一个 url 链接，...
webpack5基本教程-2
weixin_43484007的博客
10-11 418
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度。
【Stylus详解与引入】
最新发布
m0_74187147的博客
05-09 1290
Stylus是一个CSS预处理器，它为CSS带来了许多高级功能和更简洁的语法。Stylus的语法类似于Sass和Less，但更加简洁和直观。它允许你使用变量、嵌套规则、混合（mixins）、函数等特性来编写更加模块化和可维护的CSS代码。除了内置的函数外，Stylus还支持自定义函数。这允许你编写可重用的逻辑来处理样式值。rem(n)bodyh1在上面的例子中，我们定义了一个名为rem的自定义函数，用于将像素值转换为rem单位。
webpack如何打包css并将css引入index.html
m0_65059691的博客
10-11 715
style-loader:会将css 插入到dom中（将css以style标签的形式插入到head中）注意：一般正式环境做css抽离，可以减小单个文件的大小，但是需要做css样式隔离，详情见下文。可以通过插件 mini-css-extract-plugin。1、在资源模块中 针对特定的文件 如.css文件，使用loader进行解析。2、如何将css抽离 以link标签的形式引入呢？开发环境不做css抽离 css抽离会降低编译速度；css-loader: 会对。
Webpack 4入门教程：配置、打包与CSS处理详解
5. Less支持：对于Less样式文件，需安装`less`和`less-loader`，在`index.js`中导入Less文件，Webpack会自动处理Less编译并打包成CSS。 整个教程注重实践，提供了具体的操作步骤和参考资料链接，旨在帮助开发者理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值