1、配置兼容性，包括兼容不同版本，不同浏览器
-
输入“npm i -D @babel/core @babel/preset-env ba bel-loader core-js”
-
在webpack.config.json中添加配置
{
test:/\.ts$/, //指定规则生效的文件,所有以ts结尾的文件
use:[
{
loader:'babel-loader', //指定要使用的loader，复杂版
options:{
presets:[
['@babel/preset-env',
{
targets:{ //设置要兼容的浏览器版本
"chrome":"58",
"ie":"11"
},
corejs:{ //设置corejs版本
version:'3',
proposals:true // 启用实验性功能
},
useBuiltIns:'usage' //按需加载
}
]] //设置预定义的环境
}
},
'ts-loader'], //指定要使用的loader,简化版
exclude:/node_modules/ //排除node_modules文件夹
}
]
- 但是编译生成的箭头函数在某些浏览器不兼容，需要进行设置
-
- 在webpack.config.json中添加配置，在output中添加
environment:{ //指定打包环境
arrowFunction:false //禁止生成箭头函数 因为某些浏览器不兼容
}
2、安装less
- 输入命令“npm i -D less less-loader css-l oader style-loader”
- 在webpack.json.js中进行配置
-
- 找到exclude，在其下方添加（与exclude同级）
{
test:/\.less$/, //指定规则生效的文件,所有以less结尾的文件
use:[ //指定要使用的loader,从下向上执行，先处理less-loader
'style-loader',
'css-loader',
'less-loader'
]
}
3、考虑less的兼容性，安装postcss，输入命令“npm i -D postcss postcss-loader postcss-preset-env”
- 在webpack.json.js中进行配置
-
- 在use中添加
use:[ //指定要使用的loader,从下向上执行，先处理less-loader
'style-loader',
'css-loader',
{
loader:'postcss-loader', //需要安装postcss-loader和postcss
options:{
postcssOptions:{
plugins:[
["postcss-preset-env",
{
browsers:['> 1%', 'last 2 versions', 'not dead'],//设置兼容的浏览器版本,last 2 versions:兼容最近两个版本,not dead:不兼容已经停止维护的浏览器版本,> 1%:兼容全球使用率大于1%的浏览器版本
}]
]
}
}
}, //需要安装postcss-loader和postcss
'less-loader'
]
到此为止，所有配置安装完毕！
