webpack学习笔记二 :nline-source-map、实现自动构建、自动刷新浏览器
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上面。修改办法: