承上，我们已经可以识别.vue类型文件了，那么我们现在就可以开始卷起袖子开始撸起代码，写我们的样式了。
我们兴高采烈的写好了dom结构和样式，然后执行npm run dev.发现报错了。像上文说过，webpack只支持js,对于css,webpack同样需要配置相对应的css-loader.在这里安装css-loader和vue-style-loader。然后再base.js里面配置如下:
重新编译过后，我们发现已经是能够成功编译，并且在我们页面上出现了样式
好，没问题了。嗯。继续扒拉扒拉敲着，但是敲着敲着大家就会感觉不对劲了。就是我们每次修改代码或者样式都要重新编译一下，这what fuck。这肯定不科学啊！
这时候，你脑袋灵光一闪，或许应该就联想到了vue里面最为方便，最为强大的热更新了。她能够实时检测代码的变化，然后帮我们编译打包。
在配置热更新之下，我们将app.js里面的内容移除到src/main.js下,将app.js作为以后我们node.js的入口文件，而main.js作为我们vue的入口文件，让代码目录更加的清晰。更改的时候，别忘了，在webpack.config.base.js将entry指明为main.js，此时项目的目录结构大致如下
要实现热更新，我们可以借助两个工具类webpack-dev-server和webpack-dev-middleware。一般的情况下，我们是选择webpack-dev-server.但是在这里我们选择webpack-dev-middleware。因为我们前端环境不单单只是包含前端而已，还包含了node，而webpack-dev-middlearea恰好是一个中间件，能够更好的与node相结合，这里webpack-dev-middleware参照官方介绍如下：
我们先执行安装express ，webpack-dev-middleware
cnpm i express -S cnpm i webpack-dev-middleware webpack-hot-middleware -D
接着，我们在app.js编写如下，启动我们的node服务
同样，我们可以设置一个快捷的配置命令，帮助我们启动nodejs
最终运行如下：
node服务正确搭建之后，我们开始配置webpack-dev-middleware.打开webpack-config.dev.js。在里面新增如下配置：
publicPath:先不详细赘述（好吧！其实暂时我也不太明白），然后在app.js里面新增如下：这些代码的主要作用就是引入webpack-dev-middleware和webpack-hot-middleware这两个中间件，然后监听我们webpack.config.dev.js里面配置的内容
重新运行npm run start ,可以看见我们node搭配webpack-dev-middleware的热更新没有报错的运行起来了。打开浏览器输入我们的localhost:6699，我们页面虽然运行起来了，但是现在由于变成服务端渲染，因此我们还要搭配服务端路由，类似于我们前期的index.html文件。
在这里我们使用html-webpack-plugin，这个插件的作用是当我们每次编译的时候可以动态的生成一个html文件，并且在该文件内她可以自动帮我们引入bundle.js等相关编译过后的脚本文件。
执行npm run start成功过后，我们在此访问浏览器，不过这次输入的是localhost:6699/index.html.可以看到我们新的index.html文件成功的显示了。并且里面的内容是我们app.vue组件的内容。也就是说我们已经初步成功的打通了node+webpack+vue的前端环境了。
在这里我们也可以随意的修改一下app.vue里面的样式文件了，我们的相应的修改样式，前端会相应的感知触发更新，我们再也不用手动的执行刷新了。
网友评论