webpack简单配置es6的运行环境

前言：本博客介绍的仅供学习es6语法使用的（为了能让浏览器识别es6语法），并不适用于实战项目。

tips：现在将谷歌浏览器更新至最新版后大多es6语法都能正确运行了。所以可以先直接写ES6代码进行测试了。如果有ES6语法报错的情况下再进行下面配置，这样更能省时省力学习！

一、创建的目录结构

根目录为：ES6_TEST
目录树如下图：

二、需要配置的文件以及配置内容

1、app.js文件是自己练习es6语法js文件
2、index.html文件里面只需写上基本的html结构即可
3、package.json文件就是管理npm安装的插件的版本信息。
内容为：（注意插件后面的版本号）

{
    "name": "ecmascript6-_test",
    "version": "1.0.0",
    "description": "es6 test",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpack": "webpack --config webpack.config.js --colors  --display-reasons --watch"
    },
    "author": "winne",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.7.0",
        "clean-webpack-plugin": "^0.1.19",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^3.10.0"
    }
}

4、webpack.config.js 为webpack配置文件，配置es6语法转化为es5语法
内容为：（注意配置文件名和目录结构有关系的）

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    //入口文件
    entry: {
        main: "./src/js/app.js"
    },
    //出口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    //插件依赖
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            inject: 'body'
        }),
        //清除前一次打包指定的文件夹
        new cleanWebpackPlugin(['dist'])
    ],
    //处理模块资源
    module: {
        rules: [{ //处理js文件
                test: /\.js$/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        //使用env预设来处理es6语法的js文件
                        presets: ['env']
                    }
                }],
                exclude: [
                    path.resolve(__dirname, './node_modules')
                ]
            },

        ]
    }
}

5、安装es6编译补丁
如果在编译 Generator 函数的时候，如果控制台报regeneratorRuntime is not defined错误，那么就是babel 并不是完全支持编译es6。
那么就需要babel的拓展包(Polyfill)。
这是一个补完babel支持es6的拓展包，配置步骤为3个：
1.打开命令行键入 npm install --save-dev babel-polyfill 安装polyfill
2.在webpack.config.js中最上面写上var babelpolyfill = require("babel-polyfill");
3.在自己的项目app.js文件中最开头写上import "babel-polyfill";

6、安装编译 ES7 的 async/await插件
使用 ES7 的 async/await 时报错现象：
原因：这个regeneratorRuntime在浏览器上是不认识的，通过百度需要安装一个babel-plugin-transform-runtime插件。
1、使用npm安装
npm i --save-dev babel-plugin-transform-runtime
2、然后再项目根目录下新建 .babelrc 文件中添加：

{
"plugins": [
	[
	    "transform-runtime",
	    {
	      "helpers": false,
	      "polyfill": false,
	      "regenerator": true,
	      "moduleName": "babel-runtime"
	    }
    ]
  ]
}

三、安装项目依赖和运行项目

1、安装项目依赖
就是安装package.json里面的插件包，在根目录下运行命令窗口，使用 npm install 命令安装。安装完成之后我们就会发现根目录下多了一个 node_modules文件夹，就是一些依赖插件包。
2、运行项目
在根目录下运行命令窗口，使用 npm run webpack 命令运行项目。因为我们之前在package.json文件里面的script对象中加入了"webpack": “webpack --config webpack.config.js --colors --display-reasons --watch” 这条命令，就是执行webpack这个指令后就会去根据webpack.config.js配置文件来编译打包整个项目。
*在script对象中写入的命令都必须使用 *npm run * * *** 来运行。
运行成功之后在根目录下就会生成dist文件夹。

最终目录树如下：

四、练习es6语法、浏览器预览

1、在app.js文件中写入es6语法知识，如下:

let a = 20;
const b = 20;
console.log(a, b)

2、保存app.js文件之后，命令行会监听变化自动打包项目，这时只需在dist目录下打开index.html文件在浏览器预览，即可在控制台看到打印输出效果了。（此时es6会被编译为es5语法了，可以在dist目录下的main.js滑到最下面查看编译后的es5语法。）