第二章 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

3、配置loader

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

注意: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

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

3、配置loader

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

这里的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

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

3、配置loader

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

这里的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

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

3、配置loader

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

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

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

相关文章
|
JavaScript 前端开发
webpack基本配置,asset资源
webpack基本配置,asset资源
|
11天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
38 1
|
2月前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
|
6月前
|
JSON JavaScript 前端开发
对webpack的理解——打包样式资源
对webpack的理解——打包样式资源
48 0
|
前端开发 JavaScript
Vue--webpack打包css、image资源
Vue--webpack打包css、image资源
|
JavaScript
webpack原理篇(六十五):实战开发一个压缩构建资源为zip包的插件
webpack原理篇(六十五):实战开发一个压缩构建资源为zip包的插件
241 0
webpack原理篇(六十五):实战开发一个压缩构建资源为zip包的插件
|
前端开发 JavaScript CDN
webpack优化篇(四十五):进一步分包:预编译资源模块
webpack优化篇(四十五):进一步分包:预编译资源模块
207 0
webpack优化篇(四十五):进一步分包:预编译资源模块
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
148 0
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
|
XML 缓存 JSON
webpack(一)——资源模块,loader,代码分离,缓存
安装webpack 安装webpack需要两个主包,在Vscode上新建一个文件夹,在终端打开, 输入node -v检测是否安装了nodejs 输入npm -v 输入npm install webpack webpack-cli --global安装webpack,会产生一个文件package.json 输入命令webpack -v是否安装成功
133 0
webpack(一)——资源模块,loader,代码分离,缓存
webpack混入全局样式的两种方式
如果你使用 stylus 预处理器,默认支持 import 混入一些全局样式
105 0