webpack-ES6

• webpack属性配置

    const path = require('path')
    module.exports = {
        entry:{ //main是默认入口,也可以是多入口
            main:'./src/main.js'
        },
        //出口
        output:{
            filename:'./build.js', //指定js文件
            path: path.join(__dirname,'..','dist',)          //最好是绝对路径
            //'..' 代表当前目录的上一级的dist
        },
        module:{
            //一样的功能rules:   webpack2.x之后新加的
            loaders:[  //require('./a.css||./a.js')文件路径辨别require的哪些需要load
                {test:/\.css$/,  //$结尾
                 loader:'style-loader!css-loader',
                // 顺序是反过来的2!1
                },
                {
                 test:/\.(jpg|svg)$/,
                 loader:'url-loader?limit=4096&name=[name].[ext]',
                 //顺序是反过来的2!1   ext后缀名
                 //[name].[ext]内置提供的，因为本身是先读这个文件
                 options:{//常用
                    limit:4096,
                    name:'[name].[ext]'
                 }
                }
            ]
        },

        plugins:[
            //插件的执行顺序是依次执行的
            new htmlWebpackPlugin({
                template:'./src/index.html',
                })
            //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
        ]

    }

es6

---

webpack-ES6的处理

• ES6的模块,vue本身默认支持es6的模块导入导出
• babel
  • babel-loader(内部依赖babel-core)
    • 关键字(presets es2015)
    • 函数(plugins babel-plugin-transform-runtime)

安装：

E:\js\code\vue.js\day01\4\code>npm i babel-core babel-loader babel-plugin-transf
orm-runtime babel-preset-es2015 -D

ES6中的模块

• 默认
  • 导入import [,..xxx] [,..from] './xxx.ext'
  • 导出 export default obj;
• 声明式
  • 1导出 export var obj = xxx;
  • 2导出 export var obj2 = {};
  • 3单独导出 export {stu};
  • 导入 import {obj,obj2,stu} from './xxx.js'; 直接使用obj
• 全体
• 默认导出和声明式导入在使用上的区别
  • 要注意，声明式导入的时候，必须{名称} 名称要一致（按需导入)
  • 默认导入，可以随意的使用变量名

{
default:"我是默认导出的结果"    
        //import xxx from './cal.js'会获取到整个对象的default属性
obj1:"我是声明式导出1"
obj2:"我是声明式导出2" 
obj3:"我是声明式导出3"     //import {obj1,obj2}
obj4:"我是声明式导出4"
}
    import * as allObj from './cal.js';  //获取的就是一整个对象

• import 和export一定写在顶级，不要包含在{}内

ES6中的代码变化

• 对象属性的声明

    var name = 'abc';
    var person = {name}; //简写-> var person = {name:name};

    //声明函数 
    var cal = {
        add:function(){
            return 1;
        },
        add2(){
            return 2;
        },
        add3:funtion(n1,n2){
            return n1 + n2;
        },
        add4(n1,n2){  //干掉了function
            return n1 + n2;
        }
    }

• 当属性的key和变量的名相同,而要使用变量的值做value,就可以简写{name}->{name:name}
• es6中的函数声明
  • 就是干掉了:function add(){ }