无法缩小 CSS 文件

Question

我正在尝试为我的项目使用 Webpack 4。除 extract-text-webpack-plugin.

外，所有插件均有效

实际行为：当我构建项目时完全没有错误并且文件也缩小了

预期行为：在dist文件夹

中缩小CSS文件（styles.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,
        }),
    ],
};

Answer 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 文件

Cannot minify CSS file

webpack

minify

webpack-4