不多BB，直接进入正题

• mini-css-extract-plugin
  作用：从bundle.js中提取css为单独文件
• postcss-loader
• postcss-preset-env
  postcss-preset-env 作用：帮postcss找到package.json中的browserslist（看下面的解释）里面的配置，通过配置加载指定的css兼容性样式
• optimize-css-assets-webpack-plugin
  作用：对css进行压缩处理

看过我前面文章的小伙伴们都知道了怎么安装，在这里我就不多BB，直接上配置，如果忘记的可以翻翻前面的文章，有关于安装的解释，推荐安装淘宝镜像。
文章的最后有完整的代码

1.导入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

2.在plugins属性中使用插件

    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/bundle.css'
    })

3.配置loader

      {
        test: /.css$/,
        use: [
          // 'style-loader',
          // MiniCssExtractPlugin.loader取代style-loader
          // 作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }

4.在终端中输入命令：webpack

5.打包完成之后，出现一个bundle文件夹，打开之后就可以看到一个css文件夹，里面就是从bundle.js中提取出来的css文件

1.配置package.json文件

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

2.配置loader

	  {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 使用loader的默认配置
          // postcss-loader
          // 也可以不使用默认配置，使用下面配置
          {
            // 在此修改loader的配置
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => {
                // postcss的插件
                require('postcss-preset-env')()
              }
            }
          }
        ]
      }

3.配置完上面的就可以进行测试了，首写重新打包webpack，之后开始用不同的浏览器打开bundle文件下的index.html，实在不行用 ie 之后在控制台调整它的版本进行测试。

1.导入插件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

2.使用插件

    new OptimizeCssAssetsWebpackPlugin()

3.话不多说，配置完直接看打包之后的css文件是否压缩了。。。

webpack.config.js配置

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 安装mini-css-extract-plugin并使用
// 作用：提取css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 安装optimize-css-assets-webpack-plugin并使用
// 作用：压缩css代码
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'bundle')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 使用loader的默认配置
          // postcss-loader
          // 如果使用默认的话，请把下面的注释掉
          {
            // 在此修改loader的配置
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => {
                // postcss的插件
                require('postcss-preset-env')()
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 作用：用来提取css
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    }),
    // 作用：用来压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: 'development'
  // mode: 'production'
}

package.json配置

{
  "name": "webpack_config",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "core-js": "^3.6.5",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.1",
    "less-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

非常感谢各位小伙伴们的支持，我会继续努力写最搞笑的文章的。