webpack - 无法缩小 CSS 文件

Question

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

实际行为：当我构建项目时，根本没有错误，而且文件也缩小了

预期行为：在文件夹中获取缩小的 CSS 文件 ( styles.css)dist

输出

文件结构

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

你需要：

1. 向入口点添加样式表

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

2. 将选项添加到规则中ExtractTextPlugin

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

3. 更改文件的路径名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,
        }),
    ],
};