学习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!出来混的,一切都是要还的。

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

  1. webpack使用教程

    webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...

  2. Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...

  3. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  4. webpack 4 教程

    webpack 4 教程:https://blog.zfanw.com/webpack-tutorial/

  5. Webpack 入门教程

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...

  6. [转]Webpack 入门教程

    本文转自:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后 ...

  7. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  8. Webpack使用教程三(webpack-dev-server)

    Webpack给本地开发提供了一个可选的服务器webpack-dev-server.webpack-dev-server是一个很小的express应用,使用前需要用npm安装,它根据webpack.c ...

  9. webpack入门级教程

    Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...

随机推荐

  1. RxJava简单的介绍

    1. RxJava简介 Rx(ReactiveX,响应式编程)是一种事件驱动的基于异步数据流的编程模式,整个数据流就像一条河流,它可以被观测(监听),过滤,操控或者与其他数据流合并为一条新的数据流.而 ...

  2. python模块引用问题(比较杂乱,懒得整理)

    1 在stackoverflows摘抄 If the import module in the same dir, use e.g: from . import core If the import ...

  3. mysql load data 乱码

    解决方案: http://stackoverflow.com/questions/26256421/sql-load-data-infile-utf8-issue 即: load data local ...

  4. 461. Hamming Distance

    https://leetcode.com/problems/hamming-distance/ 将两个二进制数比较,输出不同位数的个数 Input: x = 1, y = 4 Output: 2 Ex ...

  5. oracle中trunc()和to_char()函数用法

    -----trunc(for date) select sysdate from dual; --当前时间  2016/9/7 10:32:04select trunc(sysdate) from d ...

  6. React学习笔记-4-什么是生命周期

    什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而 ...

  7. 忘记Windows7登陆密码解决办法

    忘记 Windows7 的登陆密码,解决这个问题的思路就是替换 system32 下的 Magnify.exe . 可以从 WindowsPE 启动,到 C:\windows\system32 下. ...

  8. while 与do ..while区别

    package com.chongrui.test;/*while语句的一般形式如下:while(表达式)语句表达式为非0值,执行while中内嵌语句.它是先判断表达式,在根据表达式值,执行语句.do ...

  9. Docker上ubuntu新建用户的网络访问不通问题

    背景 作为一个生命不息,折腾不止的码农.各种操作系统被我不知道搞崩了多少次,无数个夜晚连夜抢修数据,重装系统,那个累啊!! Option 1:备份.数据可以备份,配置可以备份,安装包可以备份.但是安装 ...

  10. curl的用法以及个人理解(php)

    php curl的个人理解 1.首先curl的官方解释为:curl是利用URL语法在命令行方式下工作的开源文件传输工具.{它只是一种传输工具!} 2.curl就是抓取网页的升级版本,支持POST.GE ...