小白webpack教程！提取css、兼容、压缩

  接上一篇文章将所需要的文件打包，但是输出的css都是嵌在html文件的style标签中，而我们平常看到的项目都是能够将文件分类，接下来的内容便是将css提取成单独文件、做浏览器兼容以及压缩的操作。

一、提取css成单独文件：

• 1）需要插件：mini-css-extract-plugin

安装引入const miniCssExtractPlugin= require("mini-css-extract-plugin"); mini-css-extract-plugin 2版本以上必须使用webpack5，请注意

• 2）配置：

plugins:[
        new miniCssExtractPlugin({
            filename: "css/built.css",
        })
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[{
                    loader:miniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../",
                      },
                    },
                    "css-loader"
                ]
                
            },
            {
                test: /\.less$/,
                use:[{
                    loader:miniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../",
                      },
                    },
                    "css-loader",
                     "less-loader"
                ]
            }
        ],
        
    }

注意：一般情况下，通过webpack默认打包的css、js等资源，路径都是绝对的。但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。增加 publicPath: '../', 即可，打包完成即可在built文件夹下查看css文件。

二、对CSS进行浏览器兼容处理：

• 1）需要安装的插件：postcss-loader 和postcss-preset-env

• 2）配置：

module:{
       rules:[
           {
               test:/\.css$/,
               use:[{
                   loader:miniCssExtractPlugin.loader,
                   options: {
                       publicPath: "../",
                     },
                   },
                   {
                       loader: "css-loader"
                   },
                   {
                       loader: 'postcss-loader',
                       options:{
                           plugins:[
                               require("postcss-preset-env")()
                           ]
                       }
                   }
               ]
               
           },
           {
               test: /\.less$/,
               use: [
                   {
                       loader:miniCssExtractPlugin.loader,
                       options: {
                           publicPath: "../",
                       },
                   },
                   {
                       loader: "css-loader"
                   },
                   {
                       loader: 'postcss-loader',
                       options:{
                               plugins: [
                                   require("postcss-preset-env")(),
                               ]
                       }
                   },
               ],
           }

   }

说明：对css进行兼容处理需要用到postcss-loader，postcss-preset-env用来对package进行匹配，查找里面browserslist配置项。这个配置项就是用来告诉webpack这些css需要做哪些浏览器的兼容。值得注意的是如果使用了postcss-loader 跟 mini-css-extract-plugin 一起使用时 一定要配置 postcss-loader 浏览器的兼容范围 ，以及版本问题 ，browserslist和postcss-loader有多种配置方法，具体请参考这里，做完兼容可以看到打包输出的css文件。
配置浏览器的兼容范围也有多种方式，如果在package.json里配置，就使用以上的方式，需要下载postcss-preset-env，如果使用其他方式如：（这里的plugins是上图里面optins里面的plugins）则需要下载postcss。

plugins:[
	require('autoprefixer')({
		overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
	})
 ]

配置browserslist参考：（写在package.json里）

其中development表示开发模式，production表示生产模式，这里的开发和生产模式和webpack.config.js里面的mode选项没有任何关系，这里指的是nodejs的开发环境。更换模式则需要的webpack.config.js的module.exports外面切换：process.env.NODE_ENV = "development" 更多的browserslist配置请自行百度或者GitHub上搜

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

三、压缩CSS文件：
压缩CSS文件其实灰常简单，使用插件完成——optimize-css-assets-webpack-plugin，然后在webpack.config.js的module.exports的plugins里面new一个实例，其相关的默认配置就足以压缩css

plugins:[
        new OptimizeCssAssetsWebpackPlugin()
    ],

压缩后打包：