一文大白话讲清楚webpack基本使用——5——babel的配置和使用

一文大白话讲清楚webpack基本使用——5——babel的配置和使用

1. 建议按文章顺序从头看，一看到底，豁然开朗

• 第一篇：
• 一文大白话讲清楚啥是个webpack
• 第二篇：
• 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
• 第三篇
• 一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
• 第四篇
• 一文大白话讲清楚webpack基本使用——3——图像相关loader的配置和使用
• 第五篇
• 一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用
• 然后看本篇，vue-Loader的配置和使用

2. babel-loader的配置和使用

2.1 针对ES6的babel-loader

• webpack虽然内置了对js模块的处理，但是不会对ES6+代码进行转换，导致低版本浏览器不支持，所以我们需要babel-loader来转换es6+代码

• 我们打开modulejs里面的index.js，看到我们之前使用了箭头函数，这是ES6的新特性，所以webpack无法处理
  

• 所以我们打开打包后的js文件，会发现还是以箭头函数的方式被打包了
  

• 这是我们所不希望的，我们希望能转化成ES5 的代码

• 所以我们引入babel-loader来处理

• 先安装babel-loader和babel

npm install @babel/core @babel/preset-env babel-loader

• 然后配置webpack,所有的js文件交给babel-loader去处理

 {
    test:/\.js$/,
        use:{
        loader:'babel-loader',
            options:{
            presets:['@babel/preset-env']//Babel提前预设好的一系列Babel转换ES6+语法的插件组合，默认会根据目标浏览器来决定使用哪些插件
        }
    }
}

• 然后我们重新构建

npm run build

• 构建完打开最后打包的js文件，看看箭头函数是否被转换
  

• 发现已经被转成了ES5代码了

• 完美

• 当然，我们配置presets时也可以直接指定浏览器，比如我们可以这样配置

 {
    test:/\.js$/,
        use:{
        loader:'babel-loader',
            options:{
            presets:[
                '@babel/preset-env'//Babel提前预设好的一系列Babel转换ES6+语法的插件组合，默认会根据目标浏览器来决定使用哪些插件
                {
                    target:['chrome 88']
                }
            ]
            
        }
    }
}

2.2 针对typescript的babel-loader

• 首先处理Typescript时，babel-loader和ts-loader都可以实现，但是有很大的差异

• 所有到底用哪个loader，取决于我们的需求是什么，根据项目来进行判断
• 我们在modulejs下面新建一个index.ts，里面定第一个字符串

const str:string='I`m typescript'
export {str}

• 然后在main.js里面引入str,并挂载到index.html页面上
  

• 然后我们需要配饰webpack.config.js关于ts文件的规则，这里需要用到@babel/preset-typescript我们安装一下

npm install @babel/preset-typescript

• 然后配置ts规则

{
    test:/\.ts$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:['@babel/preset-typescript']//通过typescript预设来处理typescript
        }
    }
}

• 然后重新构建

npm run build

• 打包完成后在浏览器运行index.html
  

• 到这里typescript打包完成

2.3 babel配置文件

• 我们可以将babel的配置文件单独放到独立的文件中，babel-loader会自动加载这些配置文件进行组合
• 单独的文件——babel.config.js
• 我们在根目录下新建一个babel.config.js

module.exports={
    presets:['@babel/preset-typescript']
}

• 这样我们在webpack.config.js里面设置ts规则的时候就可以只写test和use就可以了
  

• 我们再次构建验证，发现没有任何一点问题