使用webpack-stream

1. 由于gulp babel解析的async 不能直接用，是有require的，还需要再转一下
2. 刚好又知道了有webpack-stream这个gulp的插件
3. 故就直接用这个来编译js
4. npm install babel-loader babel-core babel-preset-env 记得要下载这些
5. 报错Uncaught TypeError: $export is not a function
   加上exclude: /node_modules/, 就好了
   参考

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');

gulp.task('default', function() {

    gulp.src('src/**/*.js')
        .pipe(named())
        .pipe(webpack({
            module: {
                loaders: [{
                    test: /\.js/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015'],
                        plugins:["transform-runtime"]
                    }
                }, ],
            },
        }))

        .pipe(gulp.dest('dist'))
});

6. Webpack和Gulp对比 这个里面是有用到gulp-webpack
7. gulp与webpack-stream集成配置
8. webpack-stream github翻译
9. 1kb的js文件搞成了79kb 看来最好的先合并再babel
10. 果然还是有那个问题，生产的js里面的方法和变量是不暴露出来的
11. babel 在每个文件都插入了辅助代码，使代码体积过大！
12. webpack 主要是做模块化 每个js文件就是封闭的一个作用域
13. '@'是设置的静态公共资源目录别名
14. 那这还是要改写之前的文件，每个html只引入一个js，再在那个js里面import其他的js，那些js也要改写，改的话就用es6的规范吧，毕竟是官方呀，这就是模块化吧，那这开发的时候看效果不都要编译一下？chrome可能支持了吧
15. 那要不还是先用gulp，就不写async了
16. gulp是锤子，html、css、js等一顿锤，每个文件都有些变化，但是没有改变他们之前的关系；webpack是剪刀，是在模块化开发的前提下，每个js都是单独的作用域，并没有暴露出全局变量，需要有引入和输出，
17. 这个时候就有不同的标准了，感觉用的较多的是CommonJS的require和module.exports
18. vue应该是基于es6的模块化规范的，用的是import和export
19. 尽管没成功，但是现在知道了为什么没成功
20. import {f1} form 'a.js' 应该就是用的a.js爆出的方法中的f1方法