webapck将css 打包后单独提取到一个css文件中

webpack4 提倡， 一旦用了这个， 不能使用style-loader 以及css module

安装

npm install --save-dev mini-css-extract-plugin

rules

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"]
      }
    ]

plugins

new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: _modeflag ? "styles/[name].[hash:5].css" : "styles/[name].css",
      chunkFilename: _modeflag ? "styles/[id].[hash:5].css" : "styles/[id].css"
    }),