webpack学习笔记-基础的babel使用

主要用于将es6语法编写转译为向后兼容的jsvascript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

配置文件

• babel.config.* :新建文件，位于项目根目录下

1. babel.config.js
2. babel.config.json

• .babelrc.* :新建文件，位于项目根目录下

1. .babelrc.js
2. .babelrc
3. .babelrc.json

具体配置

我们以babel.config.js配置文件为例：

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

persets 预设

就是一组babel插件，扩展babel功能

• @babel/preset-env: 一个只能预设，允许使用最新的javaScript语法
• @babel/preset-react: 一个用来编译React jsx语法的预设
• @babel/preset-typescript: 一个用来编译Typescript语法的预设

在webpack的使用

• 首先现在babel

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

• 在webapck.config.js中

module:{
  rules:[
    {
      test: /\.m?js$/,
      // 去除node_modules下面的文件转换
      exclude: /node_modules/,
      use:{
        loader: 'babel-loader'
      }
    }
  ]
}

• 在项目根目录下创建 babel.config.js