基本使用
本质上，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
.box3
width: 100px
height: 100px
background-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配置
