webpack(13)处理样式兼容问题和压缩css文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: true,
// 添加autoprefixer插件
importLoaders: 2,
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
plugins: function() {
return [
require("autoprefixer")({
browsers: ["last 2 versions"]
})
];
}
}
},
"sass-loader"
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "[name].min.css"
})
]
};
这段代码使用了extract-text-webpack-plugin
来提取出SCSS文件并使用css-loader
、postcss-loader
和sass-loader
进行处理,并通过autoprefixer
插件来添加浏览器兼容性。最后,使用ExtractTextPlugin
插件将处理后的CSS输出到一个压缩过的文件中。
评论已关闭