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

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

时间: 12-30

webpack 使用教程--实时刷新测试的相关文章

webpack使用教程

webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快速入手的.接地气的.傻瓜式的教程,自己手把手教又太浪费时间.想了一想,决定自己写一篇webpack的傻瓜式教程,旨在教会尚未了解webpack的人迅速入手. 对于webpack的概念.用途.好处等等一律省略,想了解的上网搜索即可,这里直接演示如何新建一个webpack的实例.

Webpack入门教程十六

84.HtmlWebpackPlugin的chunks的配置,webpack.config.js文件修改如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + "/app/a.js&

Webpack入门教程十七

88.在HtmlWebpackPlugin中使用excludeChunks项,修改webpack.config.js文件,修改内容如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + &qu

Webpack入门教程二十

102.webpack.config.js文件中entry的三种使用方式一对象形式,修改webpack.config.js文件,内容如下 module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist/js', filename:'[name].js' } } 103.使用cnpm run webpack命令重新打包 104.查看dist/js目录生成的文

Webpack入门教程二十三

113.使用for循环输出HtmlWebpackPlugin中的内容,修改模板文件index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</title&

Webpack入门教程二十四

116.输出HtmlWebpackPlugin.files中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</ti

Webpack入门教程二十五

119.输出HtmlWebpackPlugin.options中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</

Webpack入门教程二十七

126.使用同一模板文件生成不同文件且标题不同,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js', }

Webpack入门教程二十九

133.在模板中以内联的形式引用script脚本,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js',