》》webpack
第一步：安装Node.js
下载地址：http://nodejs.cn/download/
安装就是傻瓜式的，一直下一步就可以。安装完毕后可以通过cmd输入npm -v查看是否安装成功。//node a.js 可以运行a.js
npm（node package manage of JavaScript）作用：Node.js下载后自带npm，类似于迅雷，可以下载项目所需的依赖模块/包。
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
第二步：npm init初始化生成package.json
首先建立一个项目文件夹，进入文件夹，shift+右击，出现【在此处打开命令窗口(W)】，点击进入cmd控制台，目录即为当前文件夹目录。然后输入npm init，回车，会出现一些项目有关参数，可一路回车，完成后创建一个package.json。
package.json用来存放整个项目的依赖模块/包，当我们把整个项目迁移到别的地方使用时，项目运行时会根据package.json的依赖参数自动下载所需模块/包。
第三步：安装webpack
命令：npm install webpack --save-dev
测试webpack在本地是否可用，webpack -v 如果出现webpack为无效命令，则使用全局安装webpack：npm install webpack -g --save-dev
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
第四步：利用webpack打包模块并运行
webpack可以解析es6，但注意require请求同级目录文件时（./）也要写，代表同级目录。（../）代表上级目录。
如果需要把css打包到js文件中，需要安装css加载器，安装命令：npm install --save-dev style-loader css-loader.
css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
（不推荐）手动打包并运行：
# {extry file}出填写默认入口文件index.js的路径
# {destination for bundled file}处填写打包文件的目标存放路径,运行后会自动创建一个bundle.js/build.js
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file} //如webpack ./js/index.js ./dist/bundle.js
在js文件中引入css文件语法：require('style-loader!css-loader!../css/index.css');注意顺序不能错！
（推荐）自动打包并运行：
需要在项目的根目录创建webpack.config.js.项目里配置如下：
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名 },
//配置css加载器的方法试了很多，就这个可以用（rules代替了loaders）.
//配置好以后：require('style-loader!css-loader!../css/index.css')就可以写成require('../css/index.css');
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
注：若提示output下path提示不是绝对路径，试着去掉path，finename带上相对路径，即：
output: {
path: './dist/js/', // 打包后所放的路径
filename: 'bundle.js'// 打包之后的文件名
}
改成：
output: {
filename: './dist/js/bundle.js' // 打包之后的文件名}
第五步：搭建webpack服务器进行热加载自动刷新
写到这里，使用webpack一个单词就可以打包运行我们的项目了，但接下来...webpack最牛逼的地方来了——webpack可以像php/java/.net...一样搭建为我们搭建一个服务器，这样就可以热更新项目代码，实现实时运行项目，进而方便我们调试项目。
1、安装： npm install webpack-dev-server -g
2、写入到依赖： npm install webpack-dev-server --save-dev
3、第三步：修改webpack配置文件中的output：
output:{
path:"/", //注意这里的改变，必须是根目录,指定目录无效，因为webpack会在内存中根目录下生成下面文件名。
filename:"bundle.js"
4、修改index.html
<script type="text/javascript" src="bundle.js"></script>
5、运行命令 实现自动刷新： webpack-dev-server --hot --inline
6、输入localhost:8080/运行...
说明：webpack-dev-server的默认端口是8080
