安装babel
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
webpack.config.js配置
module.exports = {
/*指定入口文件*/
entry: {
app: ["babel-polyfill", "./src/main.ts"]
},
/* 输出配置 */
output: {
path: 'dist', // 输出目录
// 告诉webpack不使用箭头函数
environment:{
arrowFunction:false
}
},
/* 指定打包时使用的模块 */
module: {
// 匹配哪些文件
test: /\.ts$/,
// 使用的loader, 从后往前执行
use: [
// 2.再把js使用babel转换,此处用配置项的写法
{
loader:'babel-loader', // 加载器/解释器
options:{
// 设置预定义的环境
presets:[
[
"@babel-preset-env", // 环境的插件
{
// 要兼容的目标浏览器
targets:{
"chrome":"52",
"ie":"8"
},
// 指定corejs版本
"corejs":"3",
// 指定corejs的方式,usage按需加载
"useBuiltIns":"usage"
}
]
]
}
},
// 1.先把ts转为js
'ts-loader'
],
// 排除的目录/文件
exclude: [
'node_module'
]
},
// 插件
plugin: [],
// 设置引用模块
resolve: {
extensions: ['ts', 'js'], // 哪些后缀名的文件可以作为模块使用
}
};