首页 > 代码库 > webpack 使用教程--实时刷新测试

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搭建前端工程解决方案探索

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

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