OptimizeCSSAssetsPlugin压缩css没有成功

来源:4-9 CSS 文件的代码分割

胖虎啊咔咔咔

2019-04-19

因为现在MiniCssExtractPlugin这个插件已经支持热模块更新了,所以我就直接是在webpack.common.js中配置,配置到OptimizeCSSAssetsPlugin这个插件发现怎么打包都没有对css文件进行压缩,老师能帮我看下问题出在哪里了吗

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')   
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = { 
    entry: {
        main: './src/index.js',
    },                        
    output: {
        filename: '[name].js', 
        chunkFilename: '[name].chunk.js',                     
        path: path.resolve(__dirname, '../dist'),
    },
    module: {
        rules: [
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            limit: 2048
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',                          
                    'css-loader', 
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: ['file-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(
            {
                template: 'src/index.html',
                title: 'test App',
                filename: 'index.html',
                minify: {
                    collapseWhitespace: true
                }
            }
        ), 
        new CleanWebpackPlugin(), 
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].chunk.css'                       
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
              vendors:  {
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                // filename: 'vendors.js'
              },
              default: {
                // minChunks: 2,
                priority: -20,
                reuseExistingChunk: true,
                filename: 'common.js'
              }
            }
        },
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    }
}

图片描述

写回答

1回答

Dell

2019-04-19

文件已经拆离出来了对吧

0
2
Dell
回复
胖虎啊咔咔咔
这肯定的呀,本地压缩有什么用呢
2019-04-20
共2条回复

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程