Код
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'development',
devServer: { static: '/dist' },
devtool: 'inline-source-map',
// Две точки входа, для которых мы собираем бандлы. Таким образом мы разделяем стили и
// скрипты для двух страниц.
entry: {
index: path.resolve(__dirname, 'public/assets/javascripts/index.js'),
image: path.resolve(__dirname, 'public/assets/javascripts/image.js'),
},
// Определяем, как называются переработанные скрипты и с каким префиксом ожидать
// статические файлы.
output: {
filename: 'js/[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
publicPath: '/static/',
},
plugins: [
// Подключаем плагин для выделения CSS в отдельные файлы.
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css',
}),
// Генерируем главную страницу из ее шаблона и указываем, что подключить нужно только
// точку входа index, включая CSS и JS. Так мы избежим подключения скриптов
// и стилей от страницы с изображением.
new HtmlWebpackPlugin({
title: 'werf first app',
template: 'public/pages/index.html',
chunks: ['index'],
}),
// То же самое для страницы c изображением, но еще явно указываем конечное имя HTML-файла.
new HtmlWebpackPlugin({
title: 'werf logo',
filename: 'image.html',
template: 'public/pages/image.html',
chunks: ['image'],
}),
],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
// Изображения перенесем в каталог /static/media, причем часть "static" мы определили
// в настройках "output".
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'media/[contenthash][ext]',
},
},
],
},
// С помощью оптимизаций мы выделили скрипт с рантаймом, чтобы уменьшить общий размер статики,
// который нужно будет загрузить для разных страниц. Также добавили минимизацию CSS для production.
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
minimizer: [new CssMinimizerPlugin()],
},
};