Полный цикл в digital

Минификация выходных файлов с созданием 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",
};
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг