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代碼報錯的問題就算是解決了。