我们分了三部分，循序渐进的配置webpack，这一篇是最后一篇，完整的配置一个可用于生产的webpack项目。
我们配置webpack，要兼容ie，就需要babel去帮助我们完成这部分繁琐的工作。
为了兼容老的ie浏览器，我们需要把我们的代码打包成兼容性的代码。
npm i -D @babel/core @babel/preset-env babel-loader core-js
babel/core 就是兼容性编译的核心插件。
babel-loader 是把babel 和webpack结合的插件
配置wbepack.config.js
用ts-loader去处理 ts转为js，用babel-loader 解决兼容性问题，他们是有顺序的。use数组的后面先执行
如果要配置复杂的use项，可以用对象的形式去配置
use:[
{
loader: 'babel-loader',
options: {
presets: [
// 开始
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3,
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17',
},
},
],
// 结束
],
},
},
"ts-loader"
]
要兼容ie，不能使用箭头函数，还要在webpack的配置项output里加一个不使用箭头函数
output:{
// 指定打包文件的目录
path:path.resolve(__dirname,'dist'),
// 打包的文件名
filename:'bundle.js',
// 配置不使用箭头函数
environment:{
arrowFunction:false
}
},
完整的webpak配置
// 引入path包,作用是拼接路径
const path = require('path')
// 引入html插件
const HTMLPlugin = require('html-webpack-plugin')
// 引入清除修改之前文件的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack的所有配置信息都在这里
module.exports = {
// 指定入口文件
entry: './src/index.ts',
// 指定打包后文件的目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包的文件名
filename: 'bundle.js',
// 配置不使用箭头函数
environment: {
arrowFunction: false
}
},
// webpack 打包时要依赖的一些模块
module: {
// 指定加载规则
rules: [
{
// test指定规则生效的文件
test: /.ts$/, // ts结尾
use: [
{
loader: 'babel-loader',
options: {
presets: [
// 开始
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: {
version: 3,
},
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17',
},
},
],
// 结束
],
},
},
"ts-loader"
], // 用ts-loader去处理 ts转为js，用babel-loader 解决兼容性问题，他们是有顺序的
exclude: /mode-modules/ // 排除文件，这里的不去编译
}
]
},
// 配置webpack的插件
plugins: [
new CleanWebpackPlugin(),
new HTMLPlugin({
template: "./src/index.html"
})
],
// 配置引用模块,ts 和 js结尾的都可以作为引用模块来使用
resolve: {
extensions: ['.ts', '.js']
}
}
以上就是完整的ts+webpack的配置了，赶快试一下，愉快的进行开发吧！
