webpack(3)_编译ES6

使用babel编译ES6语法

javascript的ES2015[es6]规范出来以后，许多浏览器都开始支持ES6语法，但是很多低版本浏览器还不兼容，甚至一些高版本浏览器也不是完全支持ES6语法，所以需要使用Babe来将ES6代码转为ES5代码，从而在能够在浏览器上运行。
babeljs官网：https://babeljs.cn/

babel安装

• 初始化工程
  1、创建工程空目录Test
  2、进入Test目录
  3、使用npm初始化工程 npm init
  4、创建webpack.config.js文件
• 安装babel-loader(可以编译ES6基本语法)
  npm install babel-loader@version --save-dev
• 安装babel-core
  npm install babel-core@version --save-dev
• 安装babel-preset-env
  npm install babel-preset-env --save-dev
• 配置webpack.config.js

module.exports = {
    entry: {
        app: './app.js' // 文件入口可以有多个，在多页或者不同类型组件的情况下可能有多个入口
    },
    output: {
        filename: './output/[name].[hash:5].js' // name指打包的js的名称，如app，hash:5表示用5位不同的hash值
    },
    module: {
        rules: [
            {
                test: /\.js$/, // 定义规则
                use: {
                    loader: "babel-loader", // 使用babel-loader来执行
                    options: {
                        presets: [ // 预置运行环境
                            ["env", {
                                targets: {
                                    browsers: ['> 1%', 'last 2 versions']
                                }
                            }]
                        ]
                    }
                },
                exclude: '/node_modules/' // 规则之外的文件不做这个操作
            }
        ]
    }
}

• 安装babel-polyfill(全局垫片，引入后就可在全局范围内使用，为开发应用准备，可解析ES6方法，构造函数等)
  npm install bable-polyfill --save
  并且在main.js或者全局js文件中引入：
  import 'babel-polyfill'
  使用polyfill打包后会在全局环境下实现ES6中的函数方法，ES5中不存在的方法会自动创建。

• Babel Runtime Transform(局部垫片)
  新建文件.babelrc文件，此文件是babel的配置文件。
  安装npm install plugin-transform-runtime --save-dev
  配置.babelrc文件

  {
  "presets":[ // 预置运行环境
      ["env", {
          "targets": {
              "browsers": ["> 1%", "last 2 versions"]
          }
      }]
  ],
  "plugins": ["transform-runtime"]
  }

  • 最后一步运行webpack.config.js
    使用webpack命令打包