Этот вопрос проверяет умение адаптировать Webpack для различных целей
Webpack можно настроить для разных сред, используя отдельные файлы конфигурации или webpack-merge. В разработке важны HMR и исходные карты, а в продакшене — минификация и оптимизация ресурсов.
Для настройки 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 можно объединять конфигурации в зависимости от среды. Это гибкий подход, позволяющий избежать дублирования кода.