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模式

Hot Module Replacement
热替换是什么
参考https://segmentfault.com/a/11...
命令行方式的作法先略去，直接看node.js Api的作法
按照官网的作法

public地址不对会有跨域报错
热替换原来也是要刷新页面的吗？
https://segmentfault.com/a/11...
https://segmentfault.com/q/10...
因此说，热替换是给能够热替换的模块用的

好了，不纠结了，先写这么多