webpack之babel安装、配置和使用

yarn init -y
yarn add webpack webpack-cli babel-core babel-loader babel-preset-env -D

babel-core：封装了babel编译时需要使用的API
babel-loader：webpack打包时使用babel-loader处理javascript文件
babel-preset-env：根据支持的环境自动选择合适的babel插件的babel-preset，
即babel-preset-es2015、babel-preset-es2016、babel-preset-es2017这3个插件合集。

webpack.config.js配置文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

module.exports = {
  // 模式
  mode: 'development',
  entry: {
    // 入口文件
    app: './src/index.js'
  },
  // 开发服务器，能实时重新加载
  devServer: {
    contentBase: './dist',
    // 开启模块热替换
    hot: true,
    host: HOST,
    port: PORT
  },
  plugins: [
    // 每次构建前清理dist文件夹
    new CleanWebpackPlugin(['dist']),
    // html-webpack-plugin插件默认生成index.html文件
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    // 所有输出文件的目标路径，必须是绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
	   // 使用babel-loader在webpack打包时处理js文件
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, 'src')]
      }
    ]
  }
}

#babel配置
babel有2以下种配置方式，这2种配置方式都是一样的：

1. package.json配置
2. .babelrc文件配置（推荐）

{
       "presets": [
         "env"
       ]
 }

以上配置表示自动选择最合适的babel插件编译js
在src/index.js中引入print.js

export default function printMe () {
  let arr = ['a', 'b']
  arr.map(v => v)
  arr.includes('a')

  async function asyncFn(){
    return await 1
  }

  function* p(){
    yield 1
  }

  let q = p()
  q.next()
  console.log('updating pring.js...')
}

#打包
在package.json中添加npm script脚本

"scripts": {
    "build": "webpack"
  }

yarn run build

pring.js经babel编译后，展开的内容如下：

实际打包后的代码

#添加es7草案阶段的提案stage-2
若需要使用尚在草案阶段的ECMASCRIPT提案语法，需要添加下面的插件
yarn add babel-preset-stage-2 -D
.babelrc配置如下

{
	"presets": [
		["env", {
			"targets": {
				"browsers": ["> 1%", "last 2versions", "not ie <= 8"]
			}
		}],
		"stage-2"
	]
}

以上配置表示使用babel-preset-env编译js，且浏览器环境为：
1、全球市场份额大于1%的浏览器
2、最后2个版本的浏览器
3、大于IE8版本的IE浏览器
然后再使用babel-preset-stage-2插件编译尚处在草案阶段的语法

#总结

1. babel-preset-loader、babel-preset-env、babel-preset-core这3个插件就能满足使用webpack打包js文件时先通过babel编译js为es5的代码
2. babel-preset-stage-2插件可以处理草案阶段的ECMASCRIPT语法
   #参考
   https://www.babeljs.cn/docs/plugins/preset-env/#usebuiltins