Блог

Я пытаюсь разобраться с webpack. Я хочу объединить css и js-файл, одновременно минимизируя их. Я использую optimize-css-assets-webpack-plugin и заставляю его работать вместе mini-css-extract-plugin . Но при объединении css в js with style-loader css больше не минимизируется. Есть ли у кого-нибудь идеи о том, что я могу сделать, чтобы заставить это работать?

Индексировать js-файл:

 import './styles.css';

// some js
  

Конфигурация Webpack:

 const path = require('path');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const bundle = {
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './'),
    },
    module: {
        rules: [
            {
                test: /.css$/i,
                use: [
                    'style-loader',
                    'css-loader'
                ],
            },
        ],
    },
    optimization: {
        minimizer: [
            new OptimizeCss(),
            new TerserPlugin()
        ]
    },
    mode: 'production',
    watch: false
}

module.exports = bundle;
  

Редактировать: я использую версию webpack 4.39.3