gulp&webpack
目的
- 搞清楚什么是包管理工具、构建工具、打包工具，它们分别有什么用。
- 了解gulp、webpack配置文件，知道它们在做什么。
一、前端工具
1.1 包管理工具
- npm
- yarn（优点：速度更快、yarn.lock）
image
1.2 构建工具
说到构建工具，我们往往会在前面加上"自动化"三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手。(代码压缩、编译sass和less、自动加客户端前缀、编译es6)
- gulp
- grunt
1.3 打包工具
image
把一些依赖关系错综复杂的模块，归类整理打包成需要的静态资源。
1.3.1 为什么需要模块化？
- 全局作用域污染。
- 没有一个规范的方法，可以在一个脚本中引入另一个脚本。
1.3.2 什么是模块化？
- CommonJS 规范
var gulp =require('require');
module.exports={
aaa:
}
- AMD 规范
define("module", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
require(["module", "../file"], function(module, file) { /* ... */ });
- CMD 规范
define(function(require, exports, module) {
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
- ES6
import "jquery";
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
export function doStuff() {};
export default foo;
二、gulp
基于流的自动化构建工具。
gulp.src(globs[, options])
输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
gulp.dest(path[, options])
能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。
gulp.task(name[, deps], fn)
定义一个任务
gulp.watch(glob [, opts], tasks)
监视文件，并且可以在文件发生改动时候做一些事情。
三、webpack
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)。
3.1 Hello world：
node_modules/.bin/webpack {入口文件} {输出地址}
//webpack app/index.js dist/bundle.js
3.2 四个核心概念
- 入口（Entry）
- 出口（Output）
- 加载器（Loaders）
- babel 用于转换es6/react等 阮一峰教程
- css-loader/style-loader
- 插件（Plugins）
3.3 webpack1和webpack2差异
扩展
- 开启实时编译刷新的服务器(webpack-dev-server)
- 根据模版生成html(HtmlWebpackPlugin)
- postcss自动加客户端前缀(autoprefixer)
- 区分开发和部署配置文件
