webpack4.x 抽离css文件和压缩

今天来分享一个前端自动化构建工具webpack4x 抽离css文件和压缩的方法。

下载的具体步骤就不介绍了，相信各位大佬都已经深谙此道，首先我写一个webpack.config.js配置文件，如下代码

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");//用来抽离单独抽离css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
module.exports = {
    entry: {     //  入口
        bundle: __dirname + '/entry.js'
    },
    output: {
        path: __dirname + "/dist",
        filename: '[name].js'    //   输出文件命名
    },
    module: {
        //加载器配置
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                  })
            }
            // { 
            // test: /\.(png|jpg)$/,
            // loader: 'url-loader?limit=8192'
            // }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),//抽离出来以后的css文件名称
        new OptimizeCssAssetsPlugin()//执行压缩抽离出来的css
      ]
};

 以上是配置好的webpack配置文件，其中此webpack4x不支持extract-text-webpack-plugin插件，所以在下载的时候按照如下代码

cnpm install  extract-text-webpack-plugin@next -D

其他插件按常规下载就可以，最后webpack启动 

这里需要说明的是最好还是cnpm下载吧，基本不会出现问题