webpack4 提取和压缩css文件

1.如果你是用的 extract-text-webpack-plugin 插件进行提取的话 很不幸 在webpack4中他已经不支持 

要想运行成功的话 有俩种方法

   1.1  npm install extract-text-webpack-plugin@next 安装最新的beta版本  

   1.2  你也可以把你的webpack版本降低到3.* 版本 

2.如果你的webpack是4版本 不想 改变的话 就接着往下看

在4版本中采用了

mini-css-extract-plugin      // 插件进行提取css文件

optimize-css-assets-webpack-plugin    // 压缩css

所以让我们安装它 

npm i -D mini-css-extract-plugin   optimize-css-assets-webpack-plugin

3.在weback.config.js 引入和使用

扫描二维码关注公众号，回复： 8708826 查看本文章

// 使用min-css-extract-plugin 替代
const MiniCssExtract=require('mini-css-extract-plugin');
// 压缩css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件

module:{
        rules:[
            {
                // 使用正则表达式去匹配要用该Loader转换的CSS文件
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtract.loader,
                    },
                    "css-loader"
                ]
            }
        ]
    },

plugins:[
        new MiniCssExtract({
            // 从 .js文件中提出出来.css文件的名称  放入到dist下的css文件目录下
            filename:"css/[name]_[contenthash:8].css",  // 生成后放到 dist/css   原来的css文件名 加上 8位随机生成的hash数值
            chunkFilename:"[id].css"
        }),
        new OptimizeCssAssetsPlugin()
    ]

4.运行测试

npm  run start

最后确实成功了  最后祝大家也是一次性成功