1-es6课程简介和环境搭建

肯定会问为什么要搭建es6的开发环境，上面不都说 es6是JavaScript 语言的下一代标准了嘛，我们平时写的js都不需要搭建环境，直接在浏览器里就能运行，原因是不是所有的浏览器都支持ES6的语法，这就需要我们把ES6的语法自动转变成ES5的语法，比如：ie8浏览器
Babel是转码器，webpack是打包工具
一般项目中都会使用webpack对代码进行打包，比如，将多个js文件打包成1个js文件，这样可以减少前端的资源请求。因此，我们需要将Babel也集成到webpack中，babel-loader是webpack的babel插件，它让我们可以在wepback中运行Babel

怎么配置webpack：

1. npm init 初始化项目生成package.json文件
2. npm install webpack webpack-cli -d 生成node-modules文件
3. npm install webpack-dev-server -d 下载本地服务
4. 下载html插件和babel-loader
   npm install html-webpack-plugin -d 下载html插件
   npm install babel-loader @babel/core @babel/preset-env --save-dev 下载babel-loader
5. 新建.babelrc 文件
6. 同级目录新建webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: __dirname + '/public',
        filename: './js/[name].js'
    },
    devServer: {
        contentBase: './public',
        inline: true
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

7. 新建src目录（index.js、index.html、js文件夹--->01.js...）开发环境目录

index.js

import "./js/01.js"

01.js

var str = '你好es6.....';
console.log(str);

8. 新建public目录（生产阶段目录）
9. webpack 打包项目
10. npm run dev 运行项目（控制台打印出"你好es6....."）(需要在package.json中配置webpack-dev-server)

整体目录结构：

├── node_modules 文件       #依赖文件
├── public                 #打包后目录 文件
├── src                    #开发环境模具结构
    ├── index.js           # 根js文件
    ├── js                 #单独功能的js文件
        ├── 01.js
        ├── 02.js
        └── ...  .js   
    ├── index.html        # 根html文件
├── webpack.config.js     # webpack配置文件
├── .babelrc           /  #babel-loader配置文件
├── package.json       /  #package.json