Webpack 常见配置项
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 Shakingminimize: 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'