Webpack 4 学习06(使用babel编译ES6)

Posted 邢走在云端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 4 学习06(使用babel编译ES6)相关的知识,希望对你有一定的参考价值。

目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具

  • babel转化语法所需依赖项
    • babel-loader: 负责 es6语法转化
    • babel-corebabel核心包
    • babel-preset-env:告诉babel使用哪种转码规则进行文件处理
  • 安装依赖

    npm install babel-loader @babel/core @babel/preset-env --save-dev
  • 配置webpack.config.js文件

          {
          test:/.js$/,
          exclude:/node_modules/,
          use:'babel-loader'
        }
  • 新建 .babelrc文件配置转换规则

    {
      "presets":["@babel/preset-env"]
    }
  • 或者直接在webpack.config.js文件中配置规则

          {
          test:/.js$/,
          exclude:/node_modules/,
          use:{
              loader:'babel-loader',
              options:{
                presets:['@babel/preset-env']
              }
          }
        }

以上是关于Webpack 4 学习06(使用babel编译ES6)的主要内容,如果未能解决你的问题,请参考以下文章

Laravel mix / webpack 不会在通过 babel() 编译的脚本上触发监视功能

webpack学习笔记五

webpack2使用ch6-babel使用 处理es6 优化编译速度

无法使用 webpack 4 和 babel 7 导入 soap-npm 模块

为啥有些使用typescript/webpack的项目也使用babel完成编译

(15/24) 为webpack增加babel支持