1. entry
指定一个或多个入口点，Webpack 从这里开始构建依赖图。
entry: {
main: './src/index.js',
admin: './src/admin.js'
}
2. output
指定输出文件的路径和名称。
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/assets/' // 用于生成的资源 URL
}
3. module
配置如何处理不同类型的模块。
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}
]
}
]
}
4. resolve
配置模块解析规则，例如别名、扩展名等。
resolve: {
extensions: ['.js', '.json', '.jsx'],
alias: {
'@': path.resolve(__dirname, 'src')
}
}
5. plugins
配置插件，用于执行更复杂的任务，如优化、压缩、生成 HTML 文件等。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
6. optimization
配置优化选项，如代码分割、懒加载、Tree Shaking 等。
optimization: {
splitChunks: {
chunks: 'all',
minSize: 10000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 10,
maxInitialRequests: 5,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
filename: 'vendors~[name].js'
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
filename: 'common~[name].js'
}
}
},
usedExports: true, // 启用 Tree Shaking
minimize: true, // 启用压缩
minimizer: [new TerserPlugin()] // 使用 TerserPlugin 进行压缩
}
7. devServer
配置开发服务器，用于热重载、实时重新加载等。
devServer: {
contentBase: path.join(__dirname, 'dist'), // 指定开发服务器提供静态文件的目录
compress: true, // 启用 gzip 压缩
port: 9000, // 指定开发服务器监听的端口号
hot: true, // 启用热模块替换（Hot Module Replacement, HMR）
open: true // 启动开发服务器后自动打开浏览器
}
8. mode
设置构建模式，development 或 production。
mode: 'production'
9. externals
排除某些模块，使其不在打包结果中，通常用于全局变量或 CDN 引入的库。
externals: {
jquery: 'jQuery'
}
10. performance
配置性能提示，例如文件大小限制等。
performance: {
hints: 'warning', // 可以是 'error' 或 'warning'
maxAssetSize: 200000, // 单个文件的最大体积（字节）
maxEntrypointSize: 400000, // 入口点的最大体积（字节）
assetFilter: assetFilename => !/(\.map$)/.test(assetFilename) // 过滤文件
}
11. stats
配置构建输出的详细程度。
stats: 'errors-only' // 只显示错误信息
12. target
指定打包的目标环境，如 web、node 等。
target: 'web'
13. devtool
配置源映射（source map），用于调试。
devtool: 'source-map'
