webpack学习笔记二
inline-source-map 有助于追踪错误和警告在源代码中的原始位置，如果不添加，则堆栈会简单的指向bundle.js，显然不利于我们开发过程中修改代码。
在print.js中生成一个错误：
然后npm run build
实现自动构建
1、使用观察者模式：npm run watch，进入观察者模式，改变了代码不用再npm run build一次，修改后会自动监听改变，刷新浏览器（手动刷新）即可查看改变的效果。
2、使用webpack-dev-server,在观察者模式下监听到改变，不用手动刷新浏览器，会实现自动刷新浏览器。
npm install --save-dev webpack-dev-server
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
然后再命令行输入npm start 就进入了自动构建自动刷新的机制，就是我们所谓的热调试。
webpack-dev-middleware:把webpack处理后的文件传递给一个服务器server，webpack-dev-server在内部使用了它，同时他也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。middleware(中间件)
npm install --save-dev express webpack-dev-middleware
添加一个server.js文件，和webpack.config.js同级，内容如下
配置好之后，执行npm run server，可以看到控制台打印出了server.js中app.listen中console.log的内容
在浏览器中输入http://localhost:3000即可看到刚才的页面
有的编辑器有“安全写入”功能，会影响重新编译，所以要做相应的配置。
runtime: 浏览器运行时，webpack用来连接模块化的 应用程序的所有代码
manifest: 在编辑器开始执行、解析和映射应用程序时，保留的所有的模块的详细要点都存放在Mainifest这个数据集合中。
通过使用manifest中的数据，runtime将能够查询模块的标识符，检索出背后对应的模块。
模块热替换：允许在运行时更新各种模块，而无需完全刷新。
1、更新webpack-dev-server的配置
2、修改index.js,使得print.js内部发生变更时告诉webpack接受更新的模块。
3、修改print.js中的console.log()的内容，在浏览器中的控制台刻意看到：
在这里可以看到，点击按钮打印的还是更改前的console.log内容，这是因为onclick时间仍然绑定在旧的printMe上面。修改办法：
