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.

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

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

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

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

iframe 模式

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

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

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

{

"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！出来混的，一切都是要还的。