一、将es6转成es5的操作需要通过gulp-babel插件完成

npm install -g babel-cli
npm install --save-dev babel-preset-es2015
npm init -y
  3） 项目目录创建文件根目录下创建一个index.js,代码：
let =45；
 
        和新建自定义文件：.babelrc     代码：
        {
            "presets":[
                "es2015"
            ],
            "plugins" : []
        }
dist/index.js（这个路径必须要先建好）  -o意为输出
            该命令表示将index.js转换后输出到dist目录下的index.js文件中
此时，dist/index.js文件里就有
"use strict";
 var a = 45;（这样就把es6转成了es5）
二、模块化开发es6
      export导出
      import导入
统一在一个地方实现所有功能。
1)模块化开发的一个思路：
     a）把一个整体功能分开来实现
     b）单一实现各自的功能
     c）把单一功能合为一个整体
2）首先，执行 npm install --save-dev babel-preset-es2015 这个命令安装一下
      然后、npm init -y   就是初始化package.json文件
3）认识export和import的使用
  在sub.js中写
 
1）变量：export var a = 5;
2）数组：var arr = [3,2,4,5];
3）对象  var obj = {
               name : "tom"
                }
4）函数function box(a,b){
       return a+b;
     }
export {arr as a,obj,box as b};（as a 取别名）
在index.js中写
 
import {a,obj,b} from "./sub.js";（./是与index.js同目录下）
//console.log(a,obj.name);
console.log(b(a[2],6));//10
4）第三方插件实现模块化开发。
     模块化开发，可以一次性引入多个模块文件 无关顺序
a.  require.js模块化开发解决的问题：
        js引入的顺序问题
        js频繁引入的问题
b.  require.js引入（整个页面(.html)只需要引入require.js即可）
data-main="main"></script>
(必须要是这个)
.js
c.  main实现：
        其它依赖模块注入 并重命名
        requirejs.config({
            paths : {//模块路径
注意这里为重命名，不能加扩展名，jquery重命名名称必需为jquery
                "eq" : "js/equal"//自定义功能模块
            }
        })
]:依赖注入
        requirejs(["jquery","eq"],function($,obj){
console.log($("#box").css("color","red"));
     obj.run();
     obj.setEle("box");
var box=obj.getEle();
console.log(box.innerHTML);
     obj.setBox($);
        })
自定义模块写在define()函数中
        define(function(){
            return {
ele:null,
           setEle:function(id){
                this.ele=document.getElementById(id);
           },
           run:function(){
                alert(11);
           },
           getEle:function(){
return this.ele;
           },
           setBox:function($){
                $(this.ele).css({
                     width:"100",
                     height:"200",
                     background:"red"
})
           }
            }
        })
三、webpack
1.全局安装 npm install -g webpack@3
2.在项目中安装 npm install --save-dev webpack@3
3.配置package.json文件 npm init -y
4.配置webpack.config.js文件(手动创建这个文件，不能敲错一个字)
    代码：
        //引入path模块，node环境中自带的模块
        const path = require("path");
        module.exports = {//模块暴露
相对路径即可，相对于webpack.config.js文件）
            output : {
__dirname,"dist/"),//（必需使用绝对路径，__dirname为path中获取项目绝对
路径的属性）
bundle.js"
            }
        }
    说明：
        源文件（入口文件）一般放在src目录下index.js
document.write("我要向上");
     每次在这里修改代码都要再手动输入命令webpack运行        
        打包后的文件（出口文件）一般放在dist目录下bundle.js
里面的内容和index.js文件一样）
5.测试打包项目：（解决手动输入webpack命令运行）    
    运行命令：    
package.json的script中添加自定义字段属性，值为webpack
start" : "webpack"
            运行：npm run start
            (有点多余)
        方式三：自动监听
            package.json的script中添加自定义字段属性，值为webpack --watch
            如："autoStart" : "webpack --watch"
            （太麻烦）
（一般用这个）
            命令：webpack --watch    
        退出自动监听：ctrl+c
6.插件html-webpack-plugin 自动生成index.html
    安装该插件命令：
  npm install --save html-webpack-plugin
    修改webpack.config.js文件让插件生效
const htmlWebpackPlugin = require("html-webpack-plugin");//引入插件模块
 module.exports = {//模块暴露
相对路径即可，相对于webpack.config.js文件）
            output : {
__dirname,"dist/"),//（必需使用绝对路径，__dirname为path中获取项目绝对
路径的属性）
bundle.js"
            }，
 plugins : [
            new htmlWebpackPlugin() //创建插件，应用对象
        ]（添加一个属性）
        }
        
    执行命令webpack将会自动生成一个index.html文件
如果修改这个index.html文件，运行webpack的时候，修改后的内容将会被重新生成的index.hmtl覆盖
    要使修改后的index.html不被覆盖需要在插件构造函数中传递如下内容：
        filename : "newIndex.html",//输出新文件
        template : "dist/index.html"//修改的html文件
        即：
            plugins : [
                new htmlWebpackPlugin({
 filename : "newIndex.html",//输出新文件
                    template : "dist/index.html"//修改的html文件以这个文件为模版
                })
            ]
7.js文件合并
要用相对路径index.js文件中写require("./header.js");导入header.js文件
header.js文件下写
module.exports={
    run:function(){
document.write("通过exports添加内容")
    }
}
    var obj = require("js文件路径")//接收暴露的模块
在index.js文件下写
var obj=require("./header.js");
obj.run();
8.样式打包，安装loader加载器 可以将静态的样式文件一同打包到bundle.js文件中
 
    安装：
        npm install --save css-loader
        npm install --save style-loader
 
    在index.js中导入样式
英文下的），必须先导入style-loader
9.压缩js文件
 
    webpack内置了压缩插件，存放在webpack的optimize对象下
    webpack.config配置文件中
    1. 引入webpack模块
    var webpack = require('webpack')
    2. 获取压缩插件对象
.UglifyJsPlugin;是一个对象
    3. plugins中添加一个插件对象
    new UglifyJsPlugin();