Hot Reload! 我想改完代码就能看界面效果！

[iChenLei]

相信使用过React Native的开发者一定熟悉RN的摇一摇刷新界面

做GUI应用开发，最简单也是最烦躁的工作就是绘制用户UI界面，我们都想写完代码就看界面效果，提高开发效率，把时间花在非界面部分

weex怎么做到实时刷新呢？

我们来看下

weex create weex-demo

生成的项目中的webpack.config.js

{
    "name": "weex",
    "version": "1.0.0",
    "description": "A weex project",
    "main": "index.js",
    "scripts": {
        "start": "npm run serve",
        "build": "webpack",
        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
        "dev": "webpack --config webpack.config.js --watch -d",
        "serve": "webpack-dev-server --config webpack.dev.js --watch --open"
    },
    "keywords": [
        "weex"
    ],
    "author": "",
    "license": "MIT",
    "dependencies": {
        "fs-extra": "^4.0.1",
        "vue": "^2.4.3",
        "weex-html5": "^0.4.1",
        "weex-vue-render": "^0.12.21"
    },
    "devDependencies": {
        "babel-core": "^6.21.0",
        "babel-loader": "^6.2.4",
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-plugin-transform-runtime": "^6.9.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-runtime": "^6.9.2",
        "css-loader": "^0.26.1",
        "html-webpack-plugin": "^2.30.1",
        "ip": "^1.1.5",   //这是用来控制IP的
        "raw-loader": "^0.5.1",
        "script-ext-html-webpack-plugin": "^1.8.5",
        "vue-loader": "^12.2.0",
        "vue-template-compiler": "^2.4.3",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.4.2", //开发时当作临时服务器
        "webpack-merge": "^4.1.0",
        "weex-loader": "^0.5.3"
    },
    "optionalDependencies": {
        "ios-deploy": "^1.9.0"  //打包ipa
    }
}

注意这句脚本，开启了服务器，并监听我们的文件更改

"serve": "webpack-dev-server --config webpack.dev.js --watch --open"

⚠️最好不要使用cnpm或者yarn

官方推荐使用weex-playground，然而

在之前的文章 我们介绍了weex-ui，看到👇下面这句话

Try it with Fliggy(阿里飞猪)、Taobao(淘宝)、Tmall(天猫)、Weex Playground or any browsers now!

让我们用淘宝app扫码试试：

所以你手机里的阿里飞猪，手机淘宝和天猫app都可以用来开发界面啦，至此我们的热更新就实现了，还是挺简单的。

如果本文对你有帮助，请记得star项目，非常感谢🙏