Webpack基础篇(-)--入门
为什么需要打包工具
随着现在前端技术的发展，我们会使用各种框架（Vue、React），ES6模块化语法、Less/Sass等css预处理器，去提高新开发的效率和程序的健壮性。但是对于这些语法和框架我们的浏览器是不能直接运行的，需要使用一些打包工具去将代码进行编译，将其编译成浏览器可以运行的js、css等语法，才能运行。
此外，使用一些打包工具还可以压缩代码、做一些兼容性处理、提升代码的性能等。
常见的打包工具
- Gulp
- Webpack
- Vite
- …
目前市面上最流行的是Webpack，所以以webpack为主，去进行打包工具的学习。
Webpack
webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将我们整个项目的文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可以运行在浏览器中。一般的我们将webpack输出的文件叫做bundle
功能
webpack有两种开发模式，这两种开发模式的功能是有限的：
- 开发模式：只能编译js中的ES Module模块语法
- 生产模式：能编译js的ES Module模块语法和压缩js代码
所以要使用webpack去实现打包其他资源我们就需借助一些工具来实现。
Webpack五大核心模块
- entry：入口
指明了需要打包文件的入口，让webpack知道从按个文件开始打包 - output： 输出
指明了打包的文件要输出到哪里去，并且如何命名等 - laoder：加载器
由于webpack本省的功能很少，只能解析js、json等资源，所以在处于其他资源的时候就需要借助loader，webpack才能解析 - plugins：插件
就好比浏览器的插件一样，可以扩展webpack的功能，我们需要下载并且引用它 - mode：模式
生产模式：production
开发模式：deveplopment
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);
}
style.css
.box1{
width:100px;
height: 100px;
background-color: red;
}
css.less
.box1{
.box2{
width: 20px;
height: 20px;
background-color: antiquewhite;
background-image: url(../image/ioio.png);
}
}
main.js
import count from './js/count';
import sum from './js/sum';
import './css/box.css'
import './less/css.less'
import './sass/css.scss'
console.log(count(1,2));
console.log(sum(1,2,3,6,4,12));
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>Document</title>
</head>
<body>
<h1>Webpack</h1>
<div class="box1">
<div class="box2"></div>
</div>
<script src="./main.js"></script>
</body>
</html>
我们运行index.html文件会发现浏览器中报错。报错说module错误。
这种情况就是浏览器识别不了我们所使用的语法。这种情况就需要我们去使用打包工具去打包。
下载依赖
- 初始化package.json
npm init -y
此时会生成一个基础的package.json文件。但是需要注意的是在运行的目录的路径中，不能存在中文，不然会出现错误。
- 下载依赖：
npm i webpack webpack-cli -D
启用Webpack
- 开发模式：
npx webpack ./src/main.js --mode=development
- 生产模式
npx webpack ./src/main.js --mode=production
npx webpack: 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包main.js，还会将其依赖也一起打包进来。
–mode=xxx：指定模式（环境）
但是你会发现使用完这些也是会报错的，可能就会产生疑惑，为什么呢，这就是因为我们之前说过只能处理js的es module语法，所以在这里我们需要将main.js文件中的less和css去掉
观察输出文件
默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了。此时我们就可以在dist目录下面就可以看到mian.js文件了。可能到这就会有疑惑了，那我们该如何去解决css、less等其他的资源呢。这个时候我们就需要用到之前所提到的五大核心模块了。
二、webpack.config.js
准备Webpack配置文件：在项目的根目录下新建文件：webpack.config.js
module.exports = {
// 入口
entry: "",
// 输出
output: {},
// 加载器:这个需要注意了，我们平时说的是loader加载器，但是loader模块的名字是module
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "",
};
修改配置文件
对于出js和html等资源外，对于css、图片等其他资源，我们需要下载相对于的loader。
npm i -D laoder-name
对于这些laoder我们可以去官方的网站去查找。
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
const getStyleLoader = (loader)=>{
return [
"style-loader",
"css-loader",
{
loader: 'postcss-loader',
options : {
postcssOptions:{
plugins: ["postcss-preset-env"],
}
}
},
loader
].filter(Boolean)
}
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录，必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: 输出文件名
filename: "main.js",
},
// 加载器
module: {
rules: [
// 处理css
{
test: /\.css$/,
use: getStyleLoader()
},
{
test: /\.less$/,
use: getStyleLoader("less-loader")
},
{
test: /\.s[ac]ss$/,
use: getStyleLoader("sass-loader")
},
// 处理图片
{
test: /\.(png|jpe?g|gif|svg|webp)/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
}
}
},
// 其他资源
{
test: /\.(woff2?|ttf)/,
type: "asset/resource",
},
],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
运行命令：
npx webpack
运行成功之后，我们也可以看到dist文件下的main.js下面了。是不是比之前的方便多了，而且很清晰的可以让我们知道相关配置。