webpack工程化02（使用babel）

webpack大部分的功能都是通过loader和plugin来实现的，接下来讲一下如何处理es6语法，babel的使用。

webpack默认打包的文件是js文件，而我们知道js的api和标准是一直在更新的，所以我们很多es6的语法，webpack是不能识别的，所以这个时候我们就需要借助loader进行辅助打包。

一般我们需要使用babel-loader，babel-core, babel-preset(规定识别语法到哪种程度，babel-preset一般有很多标准，比如es2015,es2016,es2017，env，但是一般用的比较多的是env,env表示兼容2015~最新的语法都能兼容)。

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env

//webpack.config.js
const path = require('path')

module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    }
}

这就是一个最简单的loader配置，入口和出口之前已经讲过了，loader的配置就是这种写法，test匹配的是一个正则表达式，说明需要打包的文件，use匹配的是对应处理这个文件的loader。

那么我们刚才说的babel-preset怎么用呢？我们可以通过配置loader参数传进去。

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

exclude表示该文件不匹配，因为node_modules是我们下载的依赖包，不需要用babel来处理。

除此之外，babel pressets还有一个targets的参数,比如targets.browsers可以指定编译适应哪些浏览器。我们可以在presets里面再加一个数组。

"options": {
                        "presets": [
                            ["@babel/preset-env",{
                                "targets": {
                                    "browsers": ['>1%', 'last 2 version']
                                }
                            }]
                        ]
                    }

我们前面讲过，babel pressets是兼容语法，而一些函数和方法通过babel pressets是实现不了的，（比如说Generator函数）所以我们需要借助两个插件。（babel polyfill，babel runtime transform）

先说babel polyfill，它其实是一个全局的垫片，声明一次在全局内都可以使用，但缺点也是会污染全局。
先 npm i babel-polyfill -save 安装，安装完成之后只要在代码中import "babel-polyfill"即可。

我们可以测试一下

import "babel-polyfill"
function test() {
    return new Promise((resolve,reject)=> {
        setTimeout(()=> {
            let str = 'this is promise'
            resolve(str)
        }, 1000)
    })
}

async function dolist() {
    let str = await test()
    console.log(str)
    console.log('this is async')
}

dolist()

结果也正确显示了。

babel runtime transform则是一个局部的垫片。同样的先安装 npm install @babel/plugin-transform-runtime --save-dev 来把它包含到你的项目中，也要使用 npm install @babel/runtime --save 把 babel-runtime 安装为一个依赖。

安装完之后，我们在项目根目录，添加一个.babelrc文件，用来存放babel配置，然后把之前的babel-presents的配置也移过来

{
    "presets": [
        ["@babel/preset-env",{
            "targets": {
                "browsers": [">1%", "last 2 version"]
            }
        }]
    ],
    "plugins": ["@babel/transform-runtime"]
    
}

结果也是正确的。

至此，webpack打包es6语法已经实现。