Как настроить Webpack для сборки production?

Question

Для сборки production Webpack использует режим production, который включает оптимизации: минификацию, tree shaking и генерацию контент-хэшей. Настройка включает разделение кода, оптимизацию стилей и изображений.

YeaHub · Accepted Answer

В режиме production Webpack автоматически включает оптимизации, направленные на уменьшение размера и повышение производительности:Минификация JavaScript: Используется TerserPlugin для удаления неиспользуемого кода и сокращения синтаксиса.Tree shaking: Удаляет мёртвый код.Оптимизация CSS: С помощью MiniCssExtractPlugin и минификаторов, таких как css-minimizer-webpack-plugin.Разделение кода: Использование SplitChunksPlugin для выделения общих модулей.Оптимизация изображений: Сжатие графики через плагины.Пример конфигурации:const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  	mode: 'production',
  	output: {
    		filename: '[name].[contenthash].js', // Контент-хэши для кэширования
  	},
  	module: {
    		rules: [
      			{
        			test: /\.css$/,
        			use: [MiniCssExtractPlugin.loader, 'css-loader'],
      			},
    		],
  	},
  	optimization: {
    		minimize: true,
    		minimizer: [new CssMinimizerPlugin()],
    		splitChunks: {
      			chunks: 'all',
   		 },
  	,
  	plugins: [
    		new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
  	],
};Это создаёт оптимальную сборку для продакшена с минимальным размером и максимальной скоростью загрузки.