// 引入 Node.js 的 path 模块
const path = require('path');
// 引入 Webpack 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 导出 Webpack 配置对象
module.exports = {
// 入口文件路径
entry: './src/index.js',
// 输出文件配置
output: {
// 输出文件名(添加 hash 值)
filename: '[name].[contenthash].js',
// 输出目录
path: path.resolve(__dirname, 'dist')
},
// 开发服务器配置
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
// 模块加载器配置
module: {
rules: [
// 处理 JavaScript 文件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
// 处理 CSS 文件
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
// 处理图片文件
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'assets/images'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75
}
}
}
]
},
// 处理字体文件
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[name].[contenthash].[ext]'
}
}
]
},
// 插件配置
plugins: [
// 清理输出目录
new CleanWebpackPlugin(),
// 自动生成 HTML 文件
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './src/assets/favicon.ico'
}),
// 分离 CSS 文件
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
// 优化配置
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
- 处理JavaScript、CSS、图片和字体文件的加载器。
- 使用Babel处理JavaScript文件。
- 生成HTML文件和favicon。
- 分离CSS文件。
- 清空输出目录。
- 将第三方库打包到单独的文件中。
- 在开发模式下启动Web服务器并自动重新加载页面。