webpack打包并压缩css报错

       最近跟着视频学习webpack4.x，视频内容算是比较新的了，不过在跟着视频敲代码的时候，还是遇到了报错，报错截图如下：

截图中黄色标记出来的部分是报错的主要信息，当前主要的webpack配置代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/bundle-[hash].js'
  },
  devServer: {
      // 资源路径  
      contentBase: './public',
      // 实时刷新  
      inline: true
  },
  module: {
    rules: [
      {
        test:/\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use:[{
                loader: 'css-loader',
                options: {
                  minimize: true
                }
            }],
            publicPath:"../"
        })
      },
      {test: /\.(jpg|jpeg|png)$/, use: ['file-loader?limit=1024&name=./img/[name].[ext]']},
      {test: /\.html$/, use: ['html-withimg-loader']},
      {test: /\.(woff|ttf|svg|eot|xttf|woff2)$/, use: 'file-loader?limit=1024&name=./fonts/[name].[ext]'}
    ]
  },
  plugins: [
    new ExtractTextPlugin('./css/[name].css'),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeAttributeQuotes: true,    // 去除多余引号
        removeComments: true,           // 去除注释
        removeEmptyAttributes: true,    // 去除空属性
        collapseWhitespace: true        // 去除空格
      }
    })
  ]
};

 在报错截图中，我发现报错主要是css-loader中的options配置报错: ValidationError: CSS Loader Invalid Options

options should NOT have additional properties  大概意思就是cssloader的配置错误，options里面不应该有多余的配置属性，应该是因为minimize属性被移除了，参考地址https://github.com/webpack-contrib/css-loader/releases/tag/v1.0.0

所以在这里的minimize压缩css的属性无法再使用了。上图中有作者推荐使用的plugin去压缩css代码。不过我之前没有看到这个，搜索了一番看到了optimize-css-assets-webpack-plugin这个插件，它也是一个用来压缩（优化）css代码的，它默认使用cssnano去处理css代码。

       知道了使用optimize-css-assets-webpack-plugin这个插件去压缩css代码就很简单了，在npm上面搜索该插件，安装插件：

npm install --save-dev optimize-css-assets-webpack-plugin

 直接上webpack的配置代码，具体可查看代码注释，应该不难理解：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 用于编译html文件，若没有此插件，直接打包是不会有html的入口文件的
const ExtractTextPlugin = require('extract-text-webpack-plugin')    // 用于抽离css样式，而不是打包到js文件里面
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')   // 压缩css用到的插件

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/bundle-[hash].js'
  },
  devServer: {
      // 资源路径  
      contentBase: './public',
      // 实时刷新  
      inline: true
  },
  module: {
    // 引用到了什么类型的文件，就需要相对应的loader
    rules: [
      {
        test:/\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use:['css-loader'],
            publicPath:"../"      // css样式文件内资源路径的重写，没有设置的话则是默认css内的路径
        })
      },
      {test: /\.(jpg|jpeg|png)$/, use: ['file-loader?limit=1024&name=./img/[name].[ext]']},
      {test: /\.html$/, use: ['html-withimg-loader']},
      {test: /\.(woff|ttf|svg|eot|xttf|woff2)$/, use: 'file-loader?limit=1024&name=./fonts/[name].[ext]'}
    ]
  },
  plugins: [
    new ExtractTextPlugin('./css/[name].css'),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeAttributeQuotes: true,    // 去除多余引号
        removeComments: true,           // 去除注释
        removeEmptyAttributes: true,    // 去除空属性
        collapseWhitespace: true        // 去除空格
      }
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,             // 匹配资源文件名
      cssProcessor: require('cssnano'),       // 压缩优化的css的处理器，默认是cssnano
      cssProcessorPluginOptions: {            // css处理器的配置项，具体可查看相对应css处理器的文档
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
  ]
};

至此，css提取出来后并且压缩css代码报错的问题就算是解决了。