转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack的css 兼容性处理
处理 css 兼容性需要使用到
postcss-loader和postcss-preset-env两个插件
一、css 兼容性处理核心配置
1.1、修改webpack.config.js 配置文件
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
…………
// 设置 nodejs 环境变量
process.env.NODE_ENV = 'development';
…………
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
//'style-loader',
//这个loader取代style-loader。作用:提取js中的css成单独文件
{
loader: MiniCssExtractPlugin.loader,
options: {
// 这里可以指定一个 publicPath
// 默认使用 webpackOptions.output中的publicPath
// 这里如果注释掉是因为未给css文件单独分配文件夹,无需进行路径调整
publicPath: '../'
},
},
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
/*
css兼容性处理: postcss --> postcss-loader postcss-preset-env
postcss-preset-env的作用是帮postcss找到package.json中browserslist里面的配置,
通过配置加载指定的css兼容性样式，可以在 github上找到 browserslist 的更多配置。
以下举例应该在package.json 配置的内容。
========package.json 文件 begin=========
"browserslist":{
//开发环境-->设置node环境变量: process.env.NODE_ENV = development
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 9-12"
],
//生产环境：默认是生产环境
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
},
========package.json 文件 end=========
*/
//使用loader的默认配置
//'postcss-loader"
//修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
]
},
…………
]
},
webpack.config.js配置文件做了以下两处改动
改动1：添加 nodejs 环境变量设置
// 设置 nodejs 环境变量
process.env.NODE_ENV = 'development';
改动2：添加 处理 css 的 loader 配置
// 在处理 css 的 loader 配置的末端添加如下内容
//css兼容性处理: postcss --> postcss-loader postcss-preset-env
//帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
//使用loader的默认配置
//'postcss-loader"
//修改loader的配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss的插件
require('postcss-preset-env')()
]
}
}
1.2、修改package.json配置文件
// 在package.json配置文件中添加如下信息
// 如需复制粘贴，请删除注释
"browserslist": {
//开发环境下的浏览器兼容配置
"development": [
//兼容最后一个版本的 谷歌浏览器
"last 1 chrome version",
//兼容最后一个版本的 火狐浏览器
"last 1 firefox version",
//兼容最后一个版本的 mac 浏览器
"last 1 safari version",
//兼容 ie 9到 ie12
"ie 9-12"
],
//生产环境下的浏览器兼容配置
"production": [
//兼容99.8%的浏览器
">0.2%",
//不要兼容已经死掉的浏览器比如 IE6
"not dead",
//不要兼容op_mini 浏览器
"not op_mini all"
]
},
二、安装loader和插件
//安装postcss-loader和postcss-preset-env
> npm i postcss-loader postcss-preset-env -D
三、运行
> webpack