webpack实现热加载自动刷新的方法
本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下:
一、webpack-dev-server
一个轻量级的服务
功能:修改代码及时呈现到浏览器上。
第一步:安装
npm install webpack-dev-server -g
第二步:写入到依赖
npm install webpack-dev-server --save-dev
第三步:修改webpack配置文件
module.exports = { entry:"./js/index.js", output:{ path:"/", //注意这里的改变,必须是根目录,指定目录无效,因为webpack会在内存中根目录下生成下面文件名。 filename:"bundle.js" }, module:{ loaders:[ { test:/\.css$/,loader:'style-loader'}, { test:/\.css$/,loader:'css-loader'} ] }, resolve:{ extensions:['.vue','.js',".css",'jsx'] //自动补全识别后缀 } }
说明:如果想指定输出目录你需要自己学习 Content Base 命令的使用。
第四步: 修改index.html
<script type="text/javascript" src="bundle.js"></script>
第五步:运行如下命令 实现自动刷新。
webpack-dev-server --hot --inline
说明:
webpack-dev-server的默认端口号是8080
第六步:
访问http://localhost:8080/index.html 然后修改css就能立即看到反应在网页上了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
webpack中引用jquery的简单实现
1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", -- }, output:{ path:__dirname+"/dist/js"
-
webpack+vue.js实现组件化详解
简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |
-
webpack入门必知必会
前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出. 首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了.我个人认为webpack是一个集前端自动化.模块化.组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出. 本文作为一篇入门教程,这里先从webpack最简单的3招开始介绍,即拆分.打包.压缩. 步骤 1.传统项目中的问题 在不依赖任何自动化.模块化工具的项目中
-
webpack独立打包和缓存处理详解
前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'
-
webpack常用配置项配置文件介绍
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w
-
webpack2.0搭建前端项目的教程详解
一.什么是webpack: webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 注意: 目前最新为webpack2.0版本,与1.0有一些出入 二.初始化项目 npm init npm install webpack --save-dev 三.安装loader,stylus以及postCss npm install style-loa
-
webpack实现热加载自动刷新的方法
本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下: 一.webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上. 第一步:安装 npm install webpack-dev-server -g 第二步:写入到依赖 npm install webpack-dev-server --save-dev 第三步:修改webpack配置文件 module.exports = { entry:"./js/index.js", output:
-
关于Webpack dev server热加载失败的解决方法
利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not
-
webpack中如何加载静态文件的方法步骤
前言: 对于非静态的文件,如js,当webpack打包时,会被直接打到模块文件中,如main.js,如果修改了,需要再次编译 而对于静态文件,如jpg,svg等,我们不希望webpack去打包,只需要在build完后,直接放到dist下的某个路径下即可,随时可以修改,并不需要再次编译 首先,看一段很熟悉的webpack配置 { test: [/\.jpg/], loader: require.resolve('url-loader'), options: { limit: 10000, name
-
基于webpack-hot-middleware热加载相关错误的解决方法
错误1:找不到__webpack_hmr GET http://127.0.0.1/__webpack_hmr 404 (Not Found) 在webpack的entry配置添加引用路径'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',相关的参数最好不要省略,否则会出现无法自动刷新的问题. 处理脚本如下: // 准备webpack配置信息 let hotMiddlewareScrip
-
Kubernetes中Nginx配置热加载的全过程
目录 前言 使用方法 总结 前言 Nginx本身是支持热更新的,通过nginx -s reload指令,实际通过向进程发送HUB信号实现不停服重新加载配置,然而在Docker或者Kubernetes中,每次都需要进容器执行nginx -s reload指令,单docker容器还好说,可以在外面通过exec指定容器执行该指令进行热加载,Kubernetes的话,就比较难受了 今天介绍一下Kubernetes中Nginx热加载配置的处理方法——reloader reloader地址:https://
-
详解tomcat热部署和热加载的方法
详解tomcat热部署和热加载的方法 我在项目开发过程中,经常要改动Java/JSP 文件,但是又不想从新启动服务器(服务器从新启动花时间),想直接获得(debug)结果.有两种方式热部署 和热加载: 1.热加载:在server.xml -> context 属性中 设置 reloadable="true" <Context docBase="xxx" path="/xxx" reloadable="true"/&
-
webpack中的热刷新与热加载的区别
webpack非常的强大,合理的脚手架可以为我们的工作省去众多繁琐无意义的工作.其中热刷新.热加载相较于传统开发大大提高了开发节奏. 从脚手架发现热刷新.热加载的差异 相信大部分的vue开发者都是从vue-cli开始的,很多初学者欢快的跑着vue项目却不敢改随意改变vue-cli的配置(毕竟webpack确实很复杂,vue-cli也做了很多工作来优化初学者的体验). 相比之下react没有提供一个比较健壮的脚手架了(至少没有明显地被我找到,望赐教).据我知一个是yeoman的 generator
-
使用webpack配置react-hot-loader热加载局部更新
目录 webpack配置react-hot-loader热加载局部更新 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 react-hot-loader热加载不生效的可能问题 总结 webpack配置react-hot-loader热加载局部更新 有人会问 webpack-dev-server 已经是热加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢? 其实这两者的更新是有区别的,webpack-dev-server 的热加载
-
详解关于webpack多入口热加载很慢的原因
之前为公司搭建了套webpack多页面应用脚手架,起初用得挺爽,资源整合打包,组件化开发,各种组件复用,需要什么就拿什么,后来入口有50个页面了,慢慢的发现了每次按保存后的热加载等待时间越来越长,需要等待10几秒,实在太影响开发效率,于是我查找原因. 观察发现,每次到热加载时会在emitting HtmlWebpackPlugin这停留很久. 于是我想知道它到底停留了多长时间呢? 在package.json内加入--profile,它会告诉你编译过程中哪些步骤耗时最长. 停止npm,重新运行we
-
springboot基于IDEA环境热加载与热部署教程
目录 一.使用Jrebel插件 二.devtools实现热加载 1.1.引入devtools的maven依赖 1.2.设置IDEA 1.3.修改一下application.properties配置 1.4.LiveReload插件 1.5.最后测试一下 在实际的开发过程中,我们经常修改代码之后,手动的重启项目,手动刷新浏览器查看修改效果.那么有没有一种方式能够快速的.自动的帮我们将修改代码自动更新,避免手动重启,从而提高开发效率呢?肯定是有的,但是对于这个功能很多人对功能的叫法有争议,笔者查询了
随机推荐
- PHP中SESSION的注销与清除
- WebService的用户控制方式与加密算法分类的整理
- MongoDB快速入门笔记(三)之MongoDB插入文档操作
- 巧妙破除网页右键禁用的十大绝招
- 彻底删除输入法的方法
- jQuery ajax dataType值为text json探索分享
- Java中支持可变参数详解
- php写的带缓存数据功能的mysqli类
- Javascript 类的继承实现代码
- C# 动态加载程序集信息
- C#设计模式之单例模式实例讲解
- python 域名分析工具实现代码
- javascript+canvas实现刮刮卡抽奖效果
- linux shell实现随机数几种方法分享(date,random,uuid)
- jquery keypress,keyup,onpropertychange键盘事件
- jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
- android打开本地图像的方法
- 12306奇葩验证码引发思考之C#实现验证码程序
- 输出控制类
- 浅析Android手机卫士之号码归属地查询