标签：res htm min sas 手动 ack pac extra span
一、提取单独的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
标签：res htm min sas 手动 ack pac extra span
原文地址：https://www.cnblogs.com/qiaoyun/p/13375205.html
