webpack 4.0配置2

上个博客记录了webpack 的基本配置今天主要是css-loader的介绍，包括单独提出css，压缩css、js文件

 这里使用的插件npm 地址：https://www.npmjs.com/package/mini-css-extract-plugin

首先将css分离一个css文件中安装    npm install --save-dev mini-css-extract-plugin，

具体的配置如下：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

  plugins: [

    new MiniCssExtractPlugin({

      // Options similar to the same options in webpackOptions.output

      // both options are optional

      filename: "[name].css",

      chunkFilename: "[id].css"

    })

  ],

  module: {

    rules: [

      {

        test: /.css$/,

        use: [

          {

            loader: MiniCssExtractPlugin.loader,

            options: {

              // you can specify a publicPath here

              // by default it use publicPath in webpackOptions.output

              publicPath: '../'

            }

          },

          "css-loader"

        ]

      }

    ]

  }

}

这里打包压缩必须在生产环境中而不是开发环境不然css、js压缩不了