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

最新推荐文章于 2024-06-20 15:10:58 发布
最新推荐文章于 2024-06-20 15:10:58 发布
阅读量868 收藏 5
点赞数 17
分类专栏： # webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35940731/article/details/136442585
版权

处理样式资源

本章节我们学习使用 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. 配置

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 页面查看效果

新茶十九
关注
  • 17
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue-cli脚手架中webpack配置方法
10-18
Vue CLI 是 Vue.js 的官方命令行工具，它提供了一种快速搭建 Vue 项目的方式，而 Webpack 是一个模块打包工具，常用于处理前端资源。Vue CLI 自带的配置默认使用了 Webpack，允许开发者根据需求自定义配置。下面将...
webpack基础教程
01-12
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
webpack5基础--05_处理图片资源
我愿化作繁星
03-05 688
过去在Webpack4时，我们处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源。
webpack5基础--03_开发模式介绍
我愿化作繁星
03-04 302
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。提前检查代码的一些隐患，让代码运行时能更加健壮。开发模式顾名思义就是我们开发代码时使用的模式。
webpack5基础--14_优化css
我愿化作繁星
03-11 361
Css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的Css文件，通过link标签加载性能才好。
webpack之基础篇（四）：webpack-dev-server介绍
I大俊
11-26 3047
webpack-dev-server介绍。 webpack-dev-server是webpack官方提供的一个小型Express服务器。 webpack-dev-server的使用。
webpack5-基础入门-02-处理样式资源
weixin_40746230的博客
06-07 74
webpack5-基础入门-02-处理样式资源
webpack 插件 mp-webpack-plugin
meiqia888的博客
03-12 494
答疑 Q：kbone 主要有哪些依赖包？如何安装升级 kbone 依赖？A：kbone 依赖主要包含三个：mp-webpack-plugin、miniprogram-element和miniprogram-render。其中mp-webpack-plugin是一个 webpack 插件，需要安装在项目目录中。miniprogram-element和miniprogram-render则是小程序代码的依赖，需要安装在小程序目录中。默认情况下，使用 webpack 和mp-webpack-pl...
webpack5基础--02_基本配置（ 5 大核心概念）
我愿化作繁星
02-29 424
在开始使用Webpack之前，我们需要对Webpack的配置有一定的认识。
webpack、vue-cli是什么、创建项目结构分析
dengfengling999的博客
07-29 880
Webpack从一开始就对CSS模块化提供了支持，在CSSloader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。...
webpack5基础-学习笔记
anne_IT_blog的博客
01-23 656
学习资源：https://www.bilibili.com/video/BV1964y1k7Hm?from=search&seid=8848052436743801145&spm_id_from=333.337.0.0 1. webpack简介 1.1 概念 构建：通过编译、格式化校验、压缩等操作，将不支持的代码转化为支持的代码； 打包：将多个文件合并成一个文件（bundle.js），避免引入多个文件页面加载时发送多个http请求 1.2 功能 2. webpack核心概念 2.1
vue -cli.docx
04-16
根据项目需求选择合适的配置，然后Vue CLI会自动处理其余的设置，包括安装依赖包。 项目创建完成后，可以启动项目。在项目根目录下运行`npm run serve`（或`yarn serve`），这将启动一个热重载的开发服务器。访问`...
vue-cli3脚手架的配置及使用教程
10-18
此外，`vue.config.js` 是一个可选的配置文件，用于覆盖默认配置，比如设置基础 URL (`baseUrl`)、输出目录 (`outputDir`)、静态资源目录 (`assetsDir`)、路由配置等。对于跨域问题，Vue CLI 3 中可以通过 `vue....
React+Webpack4
09-04
React是一个流行的JavaScript库，用于构建用户界面，而Webpack则是一个模块打包工具，能够处理JavaScript、CSS和其他资源，将其整合为一个或多个可部署的静态文件。在我们的讨论中，还将涉及Babel，这是一个转换...
在react项目中让webpack使用mock数据
最新发布
d312697510的博客
06-20 354
在react项目中自定义webpack中间件，让webpack-dev-server加载中间件，把mock配置文件的请求地址和响应数据映射到dev server的路由上
2024高频前端面试题（含答案）(1)
2401_85124233的博客
06-12 954
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。
JAVA基础10-包装类
2401_85124011的博客
06-18 192
1.webpack打包文件体积过大？（最终打包为一个js文件）2.如何优化webpack构建的性能。4.Vue的SPA 如何优化加载速度。5.移动端300ms延迟。3.移动端的性能优化。
前端学习笔记100篇之002：Webpack简明教程（持续完善中）
superatom01的博客
06-17 754
摘要：Webpack是一个静态模块打包工具，适用于前端项目构建和模块化开发。Webpack通过从入口文件构建依赖图，然后打包相关的模块，最终输出可用于展示的内容。以下是Webpack的具体使用例子，简要介绍如何配置和使用Webpack进行项目构建
项目webpack打包后的 dist 文件
09-05
项目经过webpack打包后会生成一个...总的来说，dist文件夹是经过webpack处理后的项目产物，包含了所有打包后的静态资源文件。它具有优化过的代码和资源，适合部署和发布到线上环境使用，能够提供更好的性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值