一、修改输出资源的名称和路径
1.1 配置
javascript
const path = require("path");
module.exports = {
// 入口【相对路径】
entry: './src/main.js',
// 输出
output: {
// 文件的输出路径【绝对路径】
// __dirname 当前文件的文件夹的绝对路径
path: path.resolve(__dirname, 'dist'),
// 入口文件打包输出的文件名称
filename: 'static/js/main.js',
},
// 加载器
module: {
rules: [
// loader 的配置
// css样式
{
test: /\.css$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
]
},
// less样式
{
test: /\.less$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'less-loader',// 将less文件编译成css文件
]
},
// sass样式
{
test: /\.s[ac]ss$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'sass-loader',// 将sass文件编译成css文件
]
},
// stylus样式
{
test: /\.styl$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'stylus-loader',// 将Styl文件编译成css文件
]
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片会转成base64
// 优点：减少请求数量；缺点：体积会变大
maxSize: 10 * 1024
}
},
generator: {
// 输出图片的名称
/*
static/images/: 指定了输出文件的基础目录为 static/images/
[hash:10]: hash值取前8位
[ext]: 保留原文件的扩展名
[query]: 保留原文件的查询字符串部分
*/
filename: "static/iamges/[hash:8][ext][query]"
}
}
]
},
// 插件
plugins: [
// plugin的配置
],
/*
模式：
开发模式：development
生产模式：production
*/
mode: "development"
}1.2 修改index.html
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>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<!-- 修改 js 资源路径 -->
<script src="../dist/static/js/main.js"></script>
</body>
</html>1.3 运行指令
html
npx webpack注意：需要将上次打包生成的文件清空，再重新打包才有效果。
此时输出文件目录为：
html
├── dist
└── static
├── imgs
│ └── 7003350e.png
└── js
└── main.js二、自动清空上次打包资源
主要修改地方就是：clean: true,
javascript
const path = require("path");
module.exports = {
// 入口【相对路径】
entry: './src/main.js',
// 输出
output: {
// 文件的输出路径【绝对路径】
// __dirname 当前文件的文件夹的绝对路径
path: path.resolve(__dirname, 'dist'),
// 入口文件打包输出的文件名称
filename: 'static/js/main.js',
// 自动清空上次打包结果
// 原理：在打包前，将上述配置的path整个目录内容清空，再进行打包
clean: true,
},
// 加载器
module: {
rules: [
// loader 的配置
// css样式
{
test: /\.css$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
]
},
// less样式
{
test: /\.less$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'less-loader',// 将less文件编译成css文件
]
},
// sass样式
{
test: /\.s[ac]ss$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'sass-loader',// 将sass文件编译成css文件
]
},
// stylus样式
{
test: /\.styl$/i,// 只检测.css文件
use: [// 执行顺序：从右到左，从下到上
'style-loader',// 将js中css通过创建style标签添加到html文件中生效
'css-loader',// 将css资源编译成commonjs的模块到js中
'stylus-loader',// 将Styl文件编译成css文件
]
},
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片会转成base64
// 优点：减少请求数量；缺点：体积会变大
maxSize: 10 * 1024
}
},
generator: {
// 输出图片的名称
/*
static/images/: 指定了输出文件的基础目录为 static/images/
[hash:10]: hash值取10位
[ext]: 保留原文件的扩展名
[query]: 保留原文件的查询字符串部分
*/
filename: "static/iamges/[hash:10][ext][query]"
}
}
]
},
// 插件
plugins: [
// plugin的配置
],
/*
模式：
开发模式：development
生产模式：production
*/
mode: "development"
}