webpack 使用教程--实时刷新测试

学习webpack，基本始终是围绕：

　　1.如何安装webpack
　　2.如何使用webpack
　　3.如何使用loader
　　4.如何使用开发服务器

　　可能我们会在如何使用开发服务器的时候，遇到诸如调试的相关问题：

　　使用开发服务器

　　我们webpack中使用的开发调试服务器通常是 webpack-dev-server，通过这个服务我们更多的是想实现无刷新的处理编译入口文件。　

　　通过以下命令全局安装

1	npm install webpack-dev-server -g

　　启动服务器

1	webpack-dev-server --progress --colors

　　这会绑定一个小型express服务器到localhost:8080，来为你的静态资源及bundle（自动编译）服务。通过访问http://localhost:8080/webpack-dev-server/bundle，bundle每次重编译后浏览器页面都会自动更新。

　　但这里可能会遇到，我们改动js文件，无法实时更新的问题，很大一部分原因是没有理解编译后的bundle是虚拟的问题，本地其实质是没有编译的，所以我们不能用本地的路径去处理，需要进行更改为http://localhost:8080/bundle.js.

　　我们可能预想实现无刷新是这样的：

1. js 文件修改
2. webpack-dev-server 监控到变化
3. webpack 重新编译
4. 实时更新浏览器中的页面

　　但可惜的是，http://localhost:8080/index.html 对 js 文件的变化无动于衷，改完之后，手动刷新才能生效。

　　webpack-dev-server 提供了两种模式用于自动刷新页面：

1. iframe 模式

   我们不访问 http://localhost:8080，而是访问http://localhost:8080/webpack-dev-server/index.html

2. inline 模式

   在命令行中指定该模式，webpack-dev-server --inline。这样http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

　 由于如此我的package.json文件可能就是这样，方便我去快速启动

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

{   "name": "react-sample",   "version": "1.0.0",   "description": "webpack demo",   "main": "./src/entry.js",   "scripts": {     "start": "webpack-dev-server --inline --hot",     "build": "webpack --display-error-details",     "watch": "webpack --progress --colors --watch"   },   "repository": {     "type": "git",     "url": "https://github.com/dwqs/react_practice.git"   },   "keywords": [     "react",     "webpack"   ],   "author": "pomy",   "devDependencies": {     "babel-core": "^5.8.25",     "babel-loader": "^5.3.2",     "react": "^0.14.5",     "react-dom": "^0.14.5",     "react-hot-loader": "^1.3.0",     "webpack": "^1.12.2",     "webpack-dev-server": "^1.14.0"   } }

　　解释一下官方推荐的无刷新：

　　示例代码：

　　package.json

"scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
    /*build导致找不到页面 cannot file*/
    "hot": "webpack-dev-server  --devtool eval --progress --colors --hot --content-base",
  }

　　　webpack.config.js

module.exports = {
    entry: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, './src/entry.js')
    ]
};

　　官方的无刷新，其实是在前面讲到的iframe实现的实时刷新，如果我们，至进行http://localhost:8080/index.html是不会进行实时刷新的。还有一点，就是官方后面加的build，作用时让其监测，打包出bundle.js，但亲测会导致，到cannot page file， 所以建议，调试完毕之后，手动打包。

　

　　最近给大家一个建议，多看官方的示例文档，这才是快速入门的最佳渠道，webpack官方文档。　

　　注意：通常我们设置好webpack-dev-server服务自动刷新预览功能之后，发现手机预览不了，其实是由于webpack-pack-server服务安全机制导致的，只允许本机访问，我们可以把host设置为0.0.0.0就可以允许或者设置为本机地址。

　　解决参考资料：stackoverflow问答  stackoverflow问答2  github isuues

参考资料：

　　webpack 使用教程

　　Webpack-dev-server结合后端服务器的热替换配置

　　webpack入门(译)

　　webpack插件实现实时刷新

　　WebPack 常用功能介绍

　　在express服务中搭建webpack-dev-server

　　基于webpack搭建前端工程解决方案探索

　　自己在项目中实现的热更新

简简单单，pfan！出来混的，一切都是要还的。