js-工具尝试篇-webpack-dev-server

以前看demo或者做开发的时候，常常看到webpack-dev-server。
这边敲代码，同时刷新浏览器，真是nice!
但是自己却没有了解学习过它是怎一回事，直接就着用。导致现在觉得不把这个东西吃一吃，浑身不自在！

原理是什么
这么神奇的东西的原理是什么，作为小白开发者当然很好奇。
看介绍http://webpack.github.io/docs...

webpack-dev-server是一个基于express框架的nodejs小服务，通过webpack-dev-middleware来处理webpack这个打包机（小walker查了一下，webpack-dev-middleware的作用是把webpack打包成中间件）。它也有一个连接这个服务的小运行环境，经由sock.js实现（sock.js小walker查了一下，是一个js库，可用作创建跨浏览器的，浏览器和服务器间的通信信道）。

原理大致清楚了，还可以根据需求选不同的模式？事不宜迟，赶紧试试吧。

尝试代码的github地址https://github.com/WalkerZyy/...
Try No.1 hello world
文件目录：

package.json:

配置webpack.config.js：

参考着官网写了个服务：
由于unshift进dev的那串代码意义不明，所以先注释了，后面再研究

dev中的main.js：

helloworld.html:

package.json中加命令

浏览器中看结果：

好了，成功了，但是还是有些小疑惑，下面一点点来扣

首先，参数解读之contentBase

The webpack-dev-server will serve the files in the current directory, unless you configure a specific content base.

也就是说，服务会默认一个网站目录，如果我不填这个参数，相当于
contentBase:'./'
浏览器访问结果：

现象观察，生成的index.js在哪里
我的helloworld.html里引入了编译后的index.js，但是bin目录里并没有，任何目录里都没有。那么是如何引进来的呢？

所以说，是生成在内存中的。
描述中，有个publicPath，这时候我如果添加publicPath，也就是“/assets/”

取不到了
改为：

就ok了

另外如英语描述，打包是实时的，我加个新感叹号

就看到又打包了，刷新网页：

自动刷新
刚才没有自动刷新的，因为没有配
自动刷新有两种模式Inline 和iframe
最终效果都一样
参考http://blog.csdn.net/chengnuo...
这两种模式，官网都有讲
webpack-dev-server的启动模式有两种
node Api模式和cmd模式
之前注释掉的下面这段代码就是配置nodejs Api形式的inline模式