在webpack.config.js中进行配置
javascript
const path = require('path')
module.exports = {
// 入口
entry: './src/main.js',
// 输出
output: {
// 文件的输出路径
path: path.resolve(__dirname, 'dist'),
// 入口文件打包输出的文件名
filename: 'js/main.js',
// 自动清空上次打包结果 原理:在打包前,将path整个目录内容清空 再进行打包
clean: true,
},
// 加载器
module: {
rules: [
// loader的配置
// css-loader 处理css文件
{
test: /\.css$/, // 只检测xxx文件
use: [
// 执行顺序从右到左(从下到上)
'style-loader', // 将js中css通过创建style标签的样式添加到html中生效
'css-loader', // 将css资源编译成common.js的模块到js中
],
},
// less-loader 处理less文件
{
test: /\.less$/, // 只检测less文件
use: ['style-loader', 'css-loader', 'less-loader'],
},
// sass-loader 处理scss文件
{
test: /\.s[ac]ss$/,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
// stylus-loader 处理styl文件
{
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'stylus-loader'], // 将styl文件编译为 CSS
},
// 处理图片
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
// 会转base64
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片转base64
// 优点:减少请求数量 缺点:体积会更大
maxSize: 10 * 1024, // 10kb,
},
},
generator: {
// hash:5 hash值取前5位数(打包后的图片名称)
filename: 'images/[hash:5][ext][query]',
},
},
// 处理字体文件
{
test: /\.(ttf|woff2?)$/,
// 不会转base64
type: 'asset/resource',
generator: {
filename: 'font/[hash:5][ext][query]',
},
},
// 处理其他资源
{
test: /\.(mp3|mp4|avi)$/,
// 不会转base64
type: 'asset/resource',
generator: {
filename: 'media/[hash:5][ext][query]',
},
},
],
},
// 插件
plugins: [
// plugin的配置
],
// 模式
mode: 'development',
}