（八）webpack学习之——单独提取css文件，css兼容性处理，压缩css

一、提取单独的css文件

前面学习的过程中，用css-loader和style-loader来处理css文件，是通过在html中创建style标签把css放进去的。为了能把css单独的打包成css文件，则不能用前面的方法。

需要用到mini-css-extract-plugin插件，去掉style-loader，具体配置如下：

 loader配置：

{
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },

          },
          'css-loader'
        ],
   },

插件配置：
 new MiniCssExtractPlugin({
      filename: 'css/css.css', //输出的文件名字
    }),

二、css兼容性处理

　　有一些css3的属性，需要加上浏览器前缀才能兼容不同的浏览器。如果我们自己手动添加，那将很麻烦，所以我们可以通过配置，自动添加浏览器相关的前缀，配置如下：

{
   loader: 'postcss-loader',
   options: {
      ident: 'postcss',
      plugins: () => [
         require('postcss-preset-env')()
        ],
    },
 },

使用到的包有postcss-loader，postcss-preset-env记得安装上

三、压缩css

压缩css能使得打包后的css文件变小，从而提高性能，配置如下即可

插件配置：
new OptimizeCssAssetsWebpackPlugin(),

（八）webpack学习之——单独提取css文件，css兼容性处理，压缩css

相关推荐