Cannot minify CSS file

Question

I'm trying to use Webpack 4 for my project. All plugins works except extract-text-webpack-plugin.

Actual Behavior: when I build the project there are no errors at all and minified file also

Expected behavior: get minified CSS file ( styles.css ) in dist folder

output

file structure

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,
        }),
    ],
};

Check out this Webpack-4 Demo. Hope it helps with configuring. — Carloluis
– Carloluis, Commented May 11, 2018 at 1:30

Ann Pavlov · Accepted Answer · 2018-04-25 11:09:45Z

4

You need:

to add a stylesheet to the entry point

entry: ['./src/index.js', './src/styles.css']

to add options into rules for ExtractTextPlugin

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

change pathname for file in plugins

filename: './styles.css'

Full config

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,
        }),
    ],
};

answered Apr 25, 2018 at 11:09

Ann Pavlov

1501 gold badge2 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Coderer Over a year ago

For those coming to this answer a few months later, css-loader no longer has a minimize option and now recommends post-processing with cssnano or optimize-css-assets-webpack-plugin.

Vlad Sabev Over a year ago

To expand on the comment above, here's a link to webpack v4 documentation explaining how to setup CSS minification: github.com/webpack-contrib/…

Collectives™ on Stack Overflow

Cannot minify CSS file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related