Webpack打包———处理样式资源
基本使用
本质上,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配置