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'