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
文件已经拆离出来了对吧
022019-04-20
相似问题