当前位置：首页 > news >正文

常用的webpack配置

news 2025/7/8 15:44:40

Webpack 常用配置详解

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。以下是 Webpack 常用的配置项及其说明：

1. 入口配置 (entry)

module.exports = {entry: {// 单入口（SPA）main: './src/index.js',// 多入口（MPA）app: './src/app.js',admin: './src/admin.js'}
};

2. 输出配置 (output)

const path = require('path');module.exports = {output: {filename: '[name].[contenthash].js', // 使用入口名称和内容hashpath: path.resolve(__dirname, 'dist'),publicPath: '/', // 资源公共路径clean: true, // 清理输出目录 (Webpack 5+)chunkFilename: '[name].[contenthash].chunk.js' // 非入口chunk名称}
};

3. 模式配置 (mode)

module.exports = {mode: 'production', // 或 'development' 或 'none'
};

4. 模块配置 (module)

module.exports = {module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/preset-react']}}},{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|jpe?g|gif|svg)$/,type: 'asset/resource' // Webpack 5 资源模块}]}
};

5. 插件配置 (plugins)

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: './public/index.html'}),new MiniCssExtractPlugin({filename: '[name].[contenthash].css'})]
};

6. 解析配置 (resolve)

module.exports = {resolve: {extensions: ['.js', '.jsx', '.json'],alias: {'@': path.resolve(__dirname, 'src/'),components: path.resolve(__dirname, 'src/components/')},modules: [path.resolve(__dirname, 'src'),'node_modules']}
};

7. 开发服务器配置 (devServer)

module.exports = {devServer: {static: {directory: path.join(__dirname, 'public'),},compress: true,port: 9000,hot: true,open: true,historyApiFallback: true, // 单页应用路由支持proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true}}}
};

8. 优化配置 (optimization)

module.exports = {optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'},commons: {name: 'commons',minChunks: 2,chunks: 'initial',minSize: 0}}},runtimeChunk: 'single',minimize: true,minimizer: [new TerserPlugin(), // 压缩JSnew CssMinimizerPlugin() // 压缩CSS]}
};

9. 性能配置 (performance)

module.exports = {performance: {hints: 'warning', // 'error' 或 falsemaxEntrypointSize: 512000, // 入口点大小限制 (bytes)maxAssetSize: 512000 // 资源大小限制 (bytes)}
};

10. Source Map 配置 (devtool)

module.exports = {devtool: 'source-map', // 生产环境推荐// 或devtool: 'eval-cheap-module-source-map' // 开发环境推荐
};

11. 外部扩展 (externals)

module.exports = {externals: {jquery: 'jQuery',react: 'React','react-dom': 'ReactDOM'}
};

12. 缓存配置 (Webpack 5+)

module.exports = {cache: {type: 'filesystem',buildDependencies: {config: [__filename]}}
};

13. 模块联邦 (Module Federation)

const { ModuleFederationPlugin } = require('webpack').container;module.exports = {plugins: [new ModuleFederationPlugin({name: 'app1',filename: 'remoteEntry.js',exposes: {'./Button': './src/Button'},remotes: {app2: 'app2@http://localhost:3002/remoteEntry.js'},shared: {react: { singleton: true },'react-dom': { singleton: true }}})]
};

14. 环境变量配置

const webpack = require('webpack');module.exports = {plugins: [new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),'process.env.API_URL': JSON.stringify(process.env.API_URL)})]
};