Минификация выходных файлов с созданием 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",
};