webpack gulp node环境安装没写，百度已经很详细。

一、webpack 配置

（一）、webpack的运行方式

1、命令行（webpack ./sr/entry.js ./build/app.js –watch）

2、npm run start

3、直接输入webpack运行 (需配置webpack.config.js ==>放到glup统一管理webpack），配置文件代码如下：

​

（二）、es6转行成es5 用babel，安装babel-lic。

想兼容ie6把es6它们生成的js文件进行处理，需安装babel-load（安装命令：cnpm i babel-load –save-dev），在webpack.config配置当遇到.js文件时进行转义，语法：

​但用babel-load时，需要安装其所依赖的几个模块如下图，分别安装：

这些模块为babel-load预设组件

​安装命令，如安装babel-polyfill：cnpm i babel-polyfill –save-dev

以此方法继续安装 其他组件即可。再运行webpack 浏览器可以很好的支持所写的es6

二、webpack的“变迁”：webpack命令==》npm run （webpack中间又 集成了babel）==> gulp(方便任务管理)。

gulp为任务管理器，文档：http://www.gulpjs.com.cn/docs/getting-started/

①gulp安装：cnpm i gulp –save-dev（项目里）

cnpm i gulp -g（全局安装）

②创建gulpfile.js文件（项目运行需要的配置文件）

写入：let gulp = require(‘gulp’);（在gulp上需要用的包，都先安装后在配置文件中调用，后才能使用）

③gulp-connect 类似 Apache，启用本地服务器。

用法文档：https://www.npmjs.com/package/gulp-connect

在gulpfile.js文件声明调用let connect =require(‘gulp-connect’);

语法：

​

④webpack-stream(webpack针对gulp的一个包) 文档：https://www.npmjs.com/package/webpack-stream（安装它，为了使webpack任务在gulp管理器被管理）

在gulpfile.js文件声明调用let webpackStream = require(‘webpack-stream’);

此包需要在webpack包基础上使用，所以，需要声明调用：

let webpack = require(‘webpack’);

gulp webpack任务进行语法（在glupfile.js写入）

⑤run-sequence（gulp多任务同时进行.）文档：https://www.npmjs.com/package/run-sequence

安装：cnpm i run-sequence –save-dev

let runSequence =require(‘run-sequence’);

使用它，可以执行gulp里的多个任务，在gulpfile.js需进行配置，语法如下图：

​

⑥git别名：https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-Git-%E5%88%AB%E5%90%8D

经验告诉你，不要懒，一下子两节课，四个小时的内容。还有六小时的课时内容要补。

离魔不远矣​！(有错望指出)