在ng1时代，想要实现编码的所见即所得个人感觉配置是很简单的，无非就是gulp+browserSync，而且快速。但是在ng2时代，配合webpack做热替换是个头疼的事情，个人感觉相关文档和解决方案太少了，翻了很久的google和github才找到一点解决方案。下面说一下我是怎么做的：
首先我们需要这俩个插件
hmr插件
angular2-hmr主要用来在根模块启动时做相关设置
angular2-hmr-loader主要用于webpack loaders中，既然说需要那就需要吧
npm install angular2-hmr angular2-hmr-loader --save-dev
把main.ts修改一下，如下图
main.ts
切换到根模块 app.module.ts下，引入刚才安装模块的相关函数
app.module.ts
声明一下类型
app.module.ts
对根模块类进行改造
app.module.ts
切换到你的webpack配置文件
在匹配ts文件的loader中加入angular2-hmr-loader
webpack配置文件
你也可以像图中一样，在程序启动打包的时候设置一下全局的变量来判断是不是生产环境，一般生产环境不用配置热替换了
大功告成，安心启动程序吧。
不过这个热替换并没有想象中那么美好，由于项目中用到了bootstrap，举个例子，但我打开一个modal的时候，此时想要更改modal的css样式，但是热替换后modal竟然隐藏了，还有其他的类似下拉按钮组，热替换后一样都是隐藏了下拉部分。所以留待研究吧。我还是偏向于 gulp+browserSync，至于这么结合webpack，再看吧。。。
网友评论