当前位置：首页 > news >正文

Webpack打包———处理样式资源

news 2026/2/7 22:44:39

基本使用

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

功能介绍

基本来说Webpack本身的能力是有限的，它分为两种模式，
1、开发模式：仅能编译 JS 中的 ES Module 语法
2、生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码
但是我们平常写项目的时候并不只是有js还有其他的一些东西，这次我就来分享一下处理样式资源的一些使用

基本配置

项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件

下面我们来测试一下基本的Webpack打包的功能

文件内容

count.js

export default function count(x, y) {return x - y;
}

sum.js

export default function sum(...args) {return args.reduce((p, c) => p + c, 0);
}

main.js

import count from "./js/count";
import sum from "./js/sum";console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

初始化json文件

在跟目录的终端执行初始化package.json命令

npm init -y

另外需要注意的是package.json中的name的属性不能叫做webpack
下载依赖

npm i webpack webpack-cli -D

Webpack文件配置

在跟目录新建文件webpack.config.js

Webpack文件配置

// 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: [],},// 插件plugins: [],// 模式mode: "development", // 开发模式
};

运行命令

npx webpack

当看见跟目录里边出现一个dist文件夹就代表好了

处理样式资源

一、处理css

1、下载

npm i css-loader style-loader -D

2、配置

在这里插入图片描述

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

3、添加css资源

在src文件夹中新建css文件夹，在css文件夹中新建index.css文件

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

之后要在main.js中引入css

import "./css/index.css";

4、查看结果

在跟目录中新建public文件夹，在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>

运行

npx webpack

之后打开index.html文件查看结果即可

二、处理less

1、下载

npm i less-loader -D

2、配置

 {test: /\.less$/,use: ["style-loader", "css-loader", "less-loader"],},

3、添加less资源

在src文件夹中新建less文件夹，在less文件夹中新建index.js

.box2 {width: 100px;height: 100px;background-color: deeppink;
}

在main.js中引入less

import "./less/index.less";

4、查看结果

在html文件中添加

 <div class="box2"></div>

运行命令查看结果

三、处理sass和scss

1、下载

npm i sass-loader sass -D

2、配置

	{test: /\.s[ac]ss$/,use: ["style-loader", "css-loader", "sass-loader"],},

3、添加sass资源

在src文件夹中新建sass文件夹，在sass文件夹中新建index.sass和index.scss
index.sass

.box3width: 100pxheight: 100pxbackground-color: hotpink

index.scss

.box4 {width: 100px;height: 100px;background-color: lightpink;
}

在main.js中引入

import "./sass/index.sass";
import "./sass/index.scss";

4、查看结果

在index.html中添加

	<div class="box3"></div><div class="box4"></div>

运行命令查看结果

四、处理styl资源

1、下载

npm i stylus-loader -D

2、配置

	{test: /\.styl$/,use: ["style-loader", "css-loader", "stylus-loader"],},

3、添加styl资源

在src下新建styl文件夹，在styl文件夹中新建index.sty文件

.box width 100px height 100px background-color pink

在main.js中引入

import "./styl/index.styl";

4、查看结果

在index.html中添加

<div class="box"></div>

运行查看结果

总结

这周的总结就先到这里，之后会逐渐分享其它资源的Webpack配置

基本使用

功能介绍

基本配置

文件内容

初始化json文件

Webpack文件配置

Webpack文件配置

处理样式资源

一、处理css

1、下载

2、配置

3、添加css资源

4、查看结果

二、处理less

1、下载

2、配置

3、添加less资源

4、查看结果

三、处理sass和scss

1、下载

2、配置

3、添加sass资源

4、查看结果

四、处理styl资源

1、下载

2、配置

3、添加styl资源

4、查看结果

总结

相关文章：