Невозможно уменьшить файл CSS

Я пытаюсь использовать Webpack 4 для своего проекта. Все плагины работают, кроме extract-text-webpack-plugin.

Фактическое поведение: когда я создаю проект, ошибок нет вообще и минифицированный файл тоже

Ожидаемое поведение: получить минифицированный файл CSS (styles.css) в папке dist

выход

Невозможно уменьшить файл CSS

файловая структура

Невозможно уменьшить файл CSS

webpack.config

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'index': './src/index.js',
    },
    resolveLoader: {
        modules: [
            'node_modules',
        ],
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            minimize: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract( 'css-loader' ),
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            emitFile: false,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin( {
            filename: './src/styles.css',
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body',
            hash: true,
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
                html5: true,
                removeComments: true,
                removeEmptyAttributes: true,
                minifyCSS: true,
            },
        }),
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            uglifyOptions: {
                compress: false,
                ecma: 6,
                mangle: true,
            },
            sourceMap: true,
        }),
    ],
};

Обратите внимание на этот Демо Webpack-4. Надеюсь, это поможет с настройкой.

— 11.05.2018 03:30

webpack minify webpack-4

25.04.2018 12:46

Поиск всех неиспользуемых файлов в проекте

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

Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...

6 088

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Тебе нужно:

добавить таблицу стилей в точку входа
entry: ['./src/index.js', './src/styles.css']

добавить опции в правила для ExtractTextPlugin

use: ExtractTextPlugin.extract({
   loader: 'css-loader',
   options: {
       minimize: true,
   },
})

изменить путь к файлу в plugins

filename: './styles.css'

Полная конфигурация

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: ['./src/index.js', './src/styles.css'],
    resolveLoader: {
        modules: [
            'node_modules',
        ],
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            minimize: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    loader: 'css-loader',
                    options: {
                        minimize: true,
                    },
                }),
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            emitFile: false,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin( {
            filename: './styles.css',
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body',
            hash: true,
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
                html5: true,
                removeComments: true,
                removeEmptyAttributes: true,
                minifyCSS: true,
            },
        }),
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            uglifyOptions: {
                compress: false,
                ecma: 6,
                mangle: true,
            },
            sourceMap: true,
        }),
    ],
};

Для тех, кто пришел к этому ответу несколько месяцев спустя, css-loader больше не имеет опции minimize и теперь рекомендует постобработку с помощью cssnano или optimize-css-assets-webpack-plugin.

— 18.09.2018 12:43

Чтобы расширить комментарий выше, вот ссылка на документацию webpack v4, объясняющую, как настроить минимизацию CSS: github.com/webpack-contrib/…

— 22.09.2018 03:41

25.04.2018 13:09