Webpack处理样式资源的配置详情

更新时间：2023年12月14日 10:05:32 作者：杜同学。

Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源,本文就来介绍一下Webpack处理样式资源的配置详情,感兴趣的可以了解一下

CSS资源的处理

1.下载对应的Loader

npm i css-loader style-loader -D

`css-loader`：负责将 Css 文件编译成 Webpack 能识别的模块,也就是将css文件转化为符合commonJs语法的js文件

`style-loader`：会动态创建一个 Style 标签添加到html页面上，里面放置 Webpack 中 Css 模块内容，此时样式就会以 Style 标签的形式在页面上生效

2.具体配置

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

3.具体使用

例如我们使用如下代码走一个完整的流程

- src/css/index.css

###
css
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}
###

- src/main.js

###
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
###
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>
###

有了如上代码文件后，我们运行以下指令：

npx webpack

然后就可以打开 index.html 页面查看效果

less资源的处理

1.下载对应的Loader

npm i less-loader -D

`less-loader`：负责将 Less 文件编译成 Css 文件

2.具体配置

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

3.如何使用

和上述CSS文件的处理运行方式一样，只需要写好对应的Less资源、html资源等，然后执行如下指令，再打开index.html查看效果即可

处理 Sass 和 Scss 资源

1.下载对应的Loader

npm i sass-loader sass -D

-`sass-loader`：负责将 Sass 文件编译成 css 文件

`sass`：`sass-loader` 依赖 `sass` 进行编译

2.具体配置

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

具体使用和CSS、Less使用方式相同，只需写出对应资源运行 npx webpack 命令即可。

到此这篇关于Webpack处理样式资源的配置详情的文章就介绍到这了,更多相关Webpack 样式资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解javascript立即执行函数表达式IIFE
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
d3.js实现图形缩放平移
这篇文章主要为大家详细介绍了d3.js实现图形缩放平移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
原型方法的不同写法居然会影响调试的解决方法
原型方法的不同写法居然会影响调试的解决方法...
2007-03-03
JavaScript 滚轮事件使用说明
用过 Google 地图的人可能都很熟悉，通过滚动滚轮可以对地图进行缩放，非常地方便。适当地使用滚轮事件可以带来不错的用户体验。
2010-03-03
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
这篇文章通过php+jquery+ajax+mysql相结合，实现当用户浏览网站文章或者是论坛帖子后，想表达自己浏览后的心情，发表自己的感受，很多网站都提供了用户发表心情的功能，通过此功能可以很直观的分析文章或者是论坛对浏览者的用户体验度
2015-08-08
关于JSON与JSONP简单总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。而JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”。下面是小编总结的关于JSON与JSONP知识，感兴趣的朋友一起看下吧
2016-08-08
vue-router重定向不刷新问题的解决
本篇文章主要介绍了vue-router重定向不刷新问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
JavaScript实现简单的计算器功能
这篇文章主要为大家详细介绍了JavaScript实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
微信公众号开发实现点击返回按钮就返回到聊天界面
本文分享了微信公众号开发实现点击返回按钮就返回到聊天界面的示例代码。需要的朋友一起来看下吧
2016-12-12
JS实现的仿QQ空间图片弹出效果代码
这篇文章主要介绍了JS实现的仿QQ空间图片弹出效果代码,涉及JavaScript响应鼠标事件动态生成弹出层的相关技巧,需要的朋友可以参考下
2016-02-02