Webpack 是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle。
Webpack 本身功能是有限的:
webpack_code # 项目根目录（所有指令必须在这个目录运行）
└── src # 项目源码目录
├── js # js文件目录
│ ├── count.js
│ └── sum.js
└── main.js # 项目主文件
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.js";
import sum from "./js/sum.js";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
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>
<script type="module" src="/src/main.js"></script>
</head>
<body>
<h1>hello webpack</h1>
</body>
</html>
运行结果如下：
报错原因: 用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type=“text/javascript”，需要改为type=“module”。
此外，webpack也可以解决这个问题。
初始化webpack 生成package.json文件
npm init -y
下载依赖
npm i webpack webpack-cli -D
开发模式
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：指定模式（环境）
打包成功结果如下:
修改index.html
运行不会报错
在项目根目录下新建文件：webpack.config.js
const path = require("path");
module.exports = {
// 入口，相对路径和绝对路径都可以
entry: "./src/main.js",
// 输出
output: {
path: path.resolve(__dirname, "./dist"),
// 输出文件名
filename: "main.js",
},
// 记载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development",
};
运行
npx webpack
学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Stylus 样式资源
1.安装css-loader， style-loader
npm install --save-dev css-loader
npm install --save-dev style-loader
const path = require("path");
module.exports = {
// 入口，相对路径和绝对路径都可以
entry: "./src/main.js",
// 输出
output: {
path: path.resolve(__dirname, "./dist"),
// 输出文件名
filename: "main.js",
},
// 记载器
module: {
rules: [
// loader的配置
{
test: /\.css/, // 只检测.css文件
use: [
// 执行顺序：从右到左
"style-loader", // 将js中的css通过创建style标签添加到html文件中生效
"css-loader", // 将css资源编译成commonjs模块到js中
],
},
],
},
// 插件
plugins: [],
// 模式
mode: "development",
};
运行 npx webpack 结果如下：
首先，你需要先安装 less 和 less-loader：
npm install less less-loader --save-dev
const path = require("path");
module.exports = {
// 入口，相对路径和绝对路径都可以
entry: "./src/main.js",
// 输出
output: {
path: path.resolve(__dirname, "./dist"),
// 输出文件名
filename: "main.js",
},
// 记载器
module: {
rules: [
// loader的配置
{
test: /\.css/, // 只检测.css文件
use: [
// 执行顺序：从右到左
"style-loader", // 将js中的css通过创建style标签添加到html文件中生效
"css-loader", // 将css资源编译成commonjs模块到js中
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader", // 将less编译成css文件
],
},
],
},
// 插件
plugins: [],
// 模式
mode: "development",
};
打包运行结果如下:
其他样式资源的配置差不多，具体查看官方文档
过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理
现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源
const path = require("path");
module.exports = {
// 入口，相对路径和绝对路径都可以
entry: "./src/main.js",
// 输出
output: {
path: path.resolve(__dirname, "./dist"),
// 输出文件名
filename: "main.js",
},
// 记载器
module: {
rules: [
// loader的配置
{
test: /\.css/, // 只检测.css文件
use: [
// 执行顺序：从右到左
"style-loader", // 将js中的css通过创建style标签添加到html文件中生效
"css-loader", // 将css资源编译成commonjs模块到js中
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader", // 将less编译成css文件
],
},
{
test: /\.(png|jpe?g|git|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 这里配置小于20kb的图片就转为base64
// 优点：减少请求数量
// 缺点：体积会变大
maxSize: 20 * 1024,
},
},
},
],
},
// 插件
plugins: [],
// 模式
mode: "development",
};
打包
其中一张图片是base64
打开webpack官方文档
const path = require("path");
module.exports = {
// 入口，相对路径和绝对路径都可以
entry: "./src/main.js",
// 输出
output: {
path: path.resolve(__dirname, "./dist"),
// 入口文件打包输出文件名
filename: "static/js/main.js",
},
// 记载器
module: {
rules: [
// loader的配置
{
test: /\.css/, // 只检测.css文件
use: [
// 执行顺序：从右到左
"style-loader", // 将js中的css通过创建style标签添加到html文件中生效
"css-loader", // 将css资源编译成commonjs模块到js中
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader", // 将less编译成css文件
],
},
{
test: /\.(png|jpe?g|git|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 这里配置小于20kb的图片就转为base64
// 优点：减少请求数量
// 缺点：体积会变大
maxSize: 20 * 1024,
},
},
generator: {
// 输出图片路径及名称
// [hash:10] hash值只取前10位
filename: "static/images/[hash:10][ext][query]",
},
},
],
},
// 插件
plugins: [],
// 模式
mode: "development",
};
打包结果如下：
