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文件可能就是这样,方便我去快速启动
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-dev-server结合后端服务器的热替换配置
webpack 使用教程--实时刷新测试的更多相关文章
- webpack使用教程
webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...
- Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...
- 全网最贴心webpack系列教程和配套代码
webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...
- webpack 4 教程
webpack 4 教程:https://blog.zfanw.com/webpack-tutorial/
- Webpack 入门教程
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...
- [转]Webpack 入门教程
本文转自:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后 ...
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
- Webpack使用教程三(webpack-dev-server)
Webpack给本地开发提供了一个可选的服务器webpack-dev-server.webpack-dev-server是一个很小的express应用,使用前需要用npm安装,它根据webpack.c ...
- webpack入门级教程
Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...
随机推荐
- RxJava简单的介绍
1. RxJava简介 Rx(ReactiveX,响应式编程)是一种事件驱动的基于异步数据流的编程模式,整个数据流就像一条河流,它可以被观测(监听),过滤,操控或者与其他数据流合并为一条新的数据流.而 ...
- python模块引用问题(比较杂乱,懒得整理)
1 在stackoverflows摘抄 If the import module in the same dir, use e.g: from . import core If the import ...
- mysql load data 乱码
解决方案: http://stackoverflow.com/questions/26256421/sql-load-data-infile-utf8-issue 即: load data local ...
- 461. Hamming Distance
https://leetcode.com/problems/hamming-distance/ 将两个二进制数比较,输出不同位数的个数 Input: x = 1, y = 4 Output: 2 Ex ...
- oracle中trunc()和to_char()函数用法
-----trunc(for date) select sysdate from dual; --当前时间 2016/9/7 10:32:04select trunc(sysdate) from d ...
- React学习笔记-4-什么是生命周期
什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而 ...
- 忘记Windows7登陆密码解决办法
忘记 Windows7 的登陆密码,解决这个问题的思路就是替换 system32 下的 Magnify.exe . 可以从 WindowsPE 启动,到 C:\windows\system32 下. ...
- while 与do ..while区别
package com.chongrui.test;/*while语句的一般形式如下:while(表达式)语句表达式为非0值,执行while中内嵌语句.它是先判断表达式,在根据表达式值,执行语句.do ...
- Docker上ubuntu新建用户的网络访问不通问题
背景 作为一个生命不息,折腾不止的码农.各种操作系统被我不知道搞崩了多少次,无数个夜晚连夜抢修数据,重装系统,那个累啊!! Option 1:备份.数据可以备份,配置可以备份,安装包可以备份.但是安装 ...
- curl的用法以及个人理解(php)
php curl的个人理解 1.首先curl的官方解释为:curl是利用URL语法在命令行方式下工作的开源文件传输工具.{它只是一种传输工具!} 2.curl就是抓取网页的升级版本,支持POST.GE ...