Минификация выходных файлов с созданием MAP карт Webpack

Думаю, из названия понятно, что под минификацией понимается уменьшение чего-либо. Когда речь идет о минификации кода, подразумевается сокращение размера файлов с кодом, количества самого кода и затрат других ресурсов на его исполнение.

Минификация CSS

Для этого нужен плагин минификации CSS css-minimizer-webpack-plugin:

npm install css-minimizer-webpack-plugin --save-dev

Для этого нужен плагин минификации js terser-webpack-plugin:

npm install terser-webpack-plugin --save-dev

Для этого нужен плагин сборки CSS в бандл mini-css-extract-plugin:

npm install mini-css-extract-plugin --save-dev

Импортируем их:

webpack.config.jsimport MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";

Подключим наши плагины:

webpack.config.jsexport default {
  entry: "./src/index.js",
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
  },
};

MAP карты

Для того чтобы создать карты исходников в Webpack, укажите параметр devtool: 'source-map':

webpack.config.jsexport default {
  entry: "./src/index.js",
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
  },
  devtool: "source-map",
};