脚本宝典收集整理的这篇文章主要介绍了Webpack 处理浏览器CSS3属性兼容问题 postcss-laoder 和 autoprefixer,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
浏览器很多种,浏览器标准没有完全统一。我们需要面对一些兼容性的问题
有些兼容问题是可以在构建阶段避免的,比如CSS3
在之前我们需要手动补齐浏览器前缀,比如
.box{
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
而autoprefixer这个插件可以自动补全CSS3前缀
autoprefixer根据CAN I USE规则(caniuse.COM),通常和插件postcss-loader一起使用
autoprefixer与预处理器的区别 预处理器如less、scss是代码打包时处理,是前置处理 而autoprefixer是代码打包完成的时候,再对css处理,是后置处理
npm i postcss-loader@3.0.0 autoprefixer@9.5.1 -D
给less loader添加一下配置
browsers:['last 2 version','> 1%','ios 7'] 兼容最近两个版本,用户占比大于1%的浏览器,兼容IOS7以上
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader', // 再将样式插入到style标签中
'css-loader', // 将css转换成commonjs
'less-loader', // 将less文件转换成css文件
{
loader:'postcss-loader',
options:{
plugins:()=>[
require('autoprefixer')(
{browsers:['last 2 version','>1%','ios 7']}
)
]
}
}
]
}
效果
.seArch-text {
background: #0ff;
font-Size: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
完整配置
'use strict';
const path = require('path');
// 将css commonjs 抽成css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩html,有几个入口就对应几个htML
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 每次构建的时候自动清除之前的dist目录下的文件
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
// 生产模式还是开发模式
mode: 'production',
// 入口 指定入口文件
entry: {
// app: './src/index.js',
// search:'./src/search.js',
reactComp: './src/react-comp.js'
},
// 出口
output: {
// 指定输出目录
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js'
},
// 配置loader
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader', // 再将样式插入到style标签中
'css-loader' // 将css转换成commonjs
]
},
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader', // 再将样式插入到style标签中
'css-loader', // 将css转换成commonjs
'less-loader', // 将less文件转换成css文件
{
loader:'postcss-loader',
options:{
plugins:()=>[
require('autoprefixer')(
{browsers:['last 2 version','>1%','ios 7']}
)
]
}
}
]
},
{
test: /.(png|jpg|gif|jPEg)$/,
use: [
{
loader:'file-loader',
// 图片指纹
options:{
name:'[name]_[hash:8].[ext]'
}
// loader: 'url-loader',
// options: {
// limit: 40 * 1024 // 40k
// }
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf|otf)$/,
use: [
{
loader:'file-loader',
options:{
name:'[name]_[hash:8].[ext]'
}
}
]
}
]
},
plugins:[
// css使用contenthash,避免css没变js变化的时候,css的hash值页随着发布一起变化
new MiniCssExtractPlugin({
filename:'[name]_[contenthash:8].css',
}),
// 压缩css文件
new OptimizeCssAssetsPlugin({
assetNameRegExp:/.css$/g,
// css预处理器
cssProcessor:require('cssnano')
}),
// 压缩html
new HtmlWebpackPlugin({
// html模板所在路径
template:path.join(__dirname,'src/index.html'),
// 指定输出文件名称
filename:'reactComp.html',
// 使用哪个chunk生成HTML页面
chunks:['reactComp'],
// 为true时,jscss会自动注入此html中来
inject:true,
// 处理换行,空格,注释
minify:{
html5:true,
collapseWhitespace:true,
preserveLineBreaks:false,
minifyCSS:true,
minifyJS:true,
removeComments:false
}
}),
// 自动清除dist目录下的文件
new CleanWebpackPlugin()
]
}
以上是脚本宝典为你收集整理的Webpack 处理浏览器CSS3属性兼容问题 postcss-laoder 和 autoprefixer全部内容,希望文章能够帮你解决Webpack 处理浏览器CSS3属性兼容问题 postcss-laoder 和 autoprefixer所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。