webpack4系列教程（七）：使用 babel-loader

1. 什么是Babel

现在 ES6 语法在开发中已经很是普及，甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而，浏览器对这些高级语法的支持性并非很是好。所以为了让咱们的新语法能在浏览器中都能顺利运行，Babel 应运而生。
Babel是一个JavaScript编译器，可以让咱们放心的使用新一代JS语法。好比咱们的箭头函数：

() => console.log('hello babel')

通过Babel编译以后：

(function(){
    return console.log('hello babel');
});

会编译成浏览器可识别的ES5语法。

2. 在webpack中使用babel-loader

安装：

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

修改 webpack.config.js，加入新的loader：

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

遇到JS文件就先用babel-loader处理，exclude表示排除 node_modules 文件夹中的文件。loader的配置就OK了，但是这样还不能发挥Babel的做用。在项目根目录下建立一个 .babelrc 文件，添加代码：

{
  "presets": [
    "@babel/preset-env"
  ]
}

咱们还但愿可以在项目对一些组件进行懒加载，因此还须要一个Babel插件：

npm i babel-plugin-syntax-dynamic-import -D

在 .babelrc 文件中加入plugins配置：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

在src 目录下建立 helper.js：

console.log('this is helper')

再来修改咱们的 main.js ：

import 'babel-polyfill'
import Modal from './components/modal/modal'
import './assets/style/common.less'
import _ from 'lodash'
const App = function () {
  let div = document.createElement('div')
  div.setAttribute('id', 'app')
  document.body.appendChild(div)
  let dom = document.getElementById('app')
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: '标题',
    content: '内容',
    footer: '底部'
  })
  let button = document.createElement('button')
  button.innerText = 'click me'
  button.onclick = () => {
    const help = () => import('./helper')
    help()
  }
  document.body.appendChild(button)
}
const app = new App()
console.log(_.camelCase('Foo Bar'))

当button点击时，加载 helper 而后调用。打包以后可见：

多了一个 3.bundle.js，在浏览器打开 dist/index.html ，打开 network查看，3.bundle.js并未加载：

当点击button以后，发现浏览器请求了3.bundle.js，控制台也打印出了数据。

因为 Babel 只转换语法(如箭头函数)， 你可使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。

安装：

npm install --save-dev babel-polyfill

在入口文件引入就能够了：

import 'babel-polyfill'