webpack4系列教程（七）：运用babelloader

现在 ES6 语法在开辟中已异常提高，以至也有很多开辟人员用上了 ES7 或 ES8 语法。但是，浏览器对这些高等语法的支撑性并非异常好。因而为了让我们的新语法能在浏览器中都能顺遂运转，Babel 应运而生。
Babel是一个Javascript编译器，能够让我们宁神的运用新一代JS语法。比方我们的箭头函数：

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

经由Babel编译以后：

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

会编译成浏览器可辨认的ES5语法。

装置：

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'