Как настроить Webpack для работы в разных средах (разработка, тестирование, производство)?

Question

Webpack можно настроить для разных сред, используя отдельные файлы конфигурации или webpack-merge. В разработке важны HMR и исходные карты, а в продакшене — минификация и оптимизация ресурсов.

YeaHub · Accepted Answer

Для настройки Webpack под разные среды удобно использовать три отдельных файла конфигурации: webpack.common.js, webpack.dev.js, и webpack.prod.js.Общая конфигурация (webpack.common.js):Содержит базовые настройки, общие для всех сред.module.exports = {
	entry: './src/index.js',
	output: {
		filename: '[name].[contenthash].js',
		path: __dirname + '/dist',
	},
	module: {
		rules: [
			{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
		],
	},
};Конфигурация для разработки (webpack.dev.js):Акцент на быстродействие и удобство.const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
	mode: 'development',
	devtool: 'inline-source-map',
	devServer: {
		hot: true,
	},
});Конфигурация для продакшена (webpack.prod.js):Фокус на оптимизации.const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = merge(common, {
	mode: 'production',
	optimization: {
		minimize: true,
		minimizer: ['...', new CssMinimizerPlugin()],
	},
});С помощью webpack-merge можно объединять конфигурации в зависимости от среды. Это гибкий подход, позволяющий избежать дублирования кода.