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就能立即看到反应在网页上了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.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是一个集前端自动化.模块化.组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出. 本文作为一篇入门教程,这里先从webpack最简单的3招开始介绍,即拆分.打包.压缩. 步骤 1.传统项目中的问题 在不依赖任何自动化.模块化工具的项目中

  • 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"

  • webpack2.0搭建前端项目的教程详解

    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基础 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

  • webpack实现热加载自动刷新的方法

    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配置热加载的全过程

    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环境热加载与热部署教程

    springboot基于IDEA环境热加载与热部署教程

    目录 一.使用Jrebel插件 二.devtools实现热加载 1.1.引入devtools的maven依赖 1.2.设置IDEA 1.3.修改一下application.properties配置 1.4.LiveReload插件 1.5.最后测试一下 在实际的开发过程中,我们经常修改代码之后,手动的重启项目,手动刷新浏览器查看修改效果.那么有没有一种方式能够快速的.自动的帮我们将修改代码自动更新,避免手动重启,从而提高开发效率呢?肯定是有的,但是对于这个功能很多人对功能的叫法有争议,笔者查询了

随机推荐