（八）webpack学习之——单独提取css文件，css兼容性处理，压缩css
2021-01-16 20:15
标签：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，具体配置如下： 二、css兼容性处理 有一些css3的属性，需要加上浏览器前缀才能兼容不同的浏览器。如果我们自己手动添加，那将很麻烦，所以我们可以通过配置，自动添加浏览器相关的前缀，配置如下： 使用到的包有postcss-loader，postcss-preset-env记得安装上 三、压缩css 压缩css能使得打包后的css文件变小，从而提高性能，配置如下即可 （八）webpack学习之——单独提取css文件，css兼容性处理，压缩css 标签：res htm min sas 手动 ack pac extra span 原文地址：https://www.cnblogs.com/qiaoyun/p/13375205.html loader配置：
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ‘../‘,
},
},
‘css-loader‘
],
},
插件配置：
new MiniCssExtractPlugin({
filename: ‘css/css.css‘, //输出的文件名字
}),
{
loader: ‘postcss-loader‘,
options: {
ident: ‘postcss‘,
plugins: () => [
require(‘postcss-preset-env‘)()
],
},
},
插件配置：
new OptimizeCssAssetsWebpackPlugin(),
文章标题：（八）webpack学习之——单独提取css文件，css兼容性处理，压缩css
文章链接：http://soscw.com/index.php/essay/42872.html