webpack 刷新页面不更新js_webpack热更新不刷新页面 - CSDN
精华内容
参与话题
  • vue +webpack 项目中数据更新页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的...

    vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据。代码如下

     if(config.url.indexOf('?')>-1){
                config.url = url + config.url +"&timestamp="+getTimestamp;
              }else{
                config.url = url +config.url +"?timestamp="+getTimestamp;
              }

     

    展开全文
  • webpack4.x热更新,自动刷新

    千次阅读 2018-08-17 13:49:29
    更新 webpack-dev-server就是一个基于node.jswebpack的小型服务器。 安装webpack-dev-server npm install webpack-dev-serve --save-dev 配置webpack.config.js文件 const webpack=require('webpack');...

    模块热替换(Hot Module Replacement)

    模块热替换功能会在应用程序运行过程中替换、添加或删除模块,无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:

    • 保留在完全重新加载页面时丢失的应用程序状态。
    • 只更新变更内容,以节省宝贵的开发时间。
    • 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

    webpack-dev-server实现热更新(HMR)

    webpack-dev-server就是一个基于node.js和webpack的小型服务器。

    热更新可以做到在不刷新浏览器的前提下更新页面。

    安装webpack-dev-server
    npm install webpack-dev-server --g
    npm install webpack-dev-serve --save-dev
    配置webpack.config.js文件
    const webpack=require('webpack');//引入webpack
        entry:__dirname+'/src/main.js',
        output:{
            publicPath:'/dist',//必须加publicPath
            path:__dirname+'/dist',
            filename:'bundle.js'
        },
        devServer:{
            host:'localhost',
            port:'8080',
            open:true//自动拉起浏览器
            hot:true,//热加载
            //hotOnly:true
        },
        plugins:[
        //热更新插件
            new webpack.HotModuleReplacementPlugin()
        ]

    但是通过日志发现页面先热更新然后又自动刷新,这和自动刷新是一样的。
    如果只需要触发HMR,可以再加个参数hotOnly:true,这时候只有热更新,禁用了自动刷新功能。
    如果需要自动刷新就不需要设置热更新。

    热跟新必须有以下5点:
    1.引入webpack
    2.output里加publicPath
    3.devServer中增加hot:true
    4.devServer中增加hotOnly:true
    5.在plugins中配置 new webpack.HotModuleReplacementPlugin()

    展开全文
  • webpack使用之自动刷新

    千次阅读 2015-11-10 09:46:25
    webpack-dev-server的自动刷新功能

    1 全局安装webpack

    npm install -g webpack-dev-server

    2 实例演示

     

    2.1 目录结构:


    2.2 在命令行下启动webpack-dev-server

        webpack-dev-server

    2.3 查看方式:

    到http://localhost:8080/webpack-dev-server/index.html查看,此时若更改main.js中的内容,该页面会实时刷新。


    展开全文
  • webpack-dev-server 提供了一个简单的 web 服务器,并且能够实时重新加载 通过官方文档各种配置,自己实验了一把,知道是哪里出了问题,一直实现了实时加载,后来查阅资料,一个很简单的配置就实现了实时加载,...

    webpack-dev-server 提供了一个简单的 web 服务器,并且能够实时重新加载

    通过官方文档各种配置,自己实验了一把,不知道是哪里出了问题,一直实现不了实时加载,后来查阅资料,一个很简单的配置就实现了实时加载,在这里记录一下:

    • 需要先初始化webpack-dev-server
    npm install webpack-dev-server --save-dev

    注意,如果像上面那样没有指定哪个版本的话就去下载,会下载最新的 webpack-dev-server,坑就在这里,如果你的项目中的 webpack不是最新的,那么你使用webpack-dev-server起来会有错误的,所以根据你的项目中的webpack版本去下载它,
    比如我的项目使用的webpackv3X的版本就下载的是webpack-dev-server@2.2.0的

    • -

    webpack.config.js中进行配置

    1.需要在entry配置项中配置client

    本项目的common入口是公用方法,每个页面中都会使用到,所以,需要在每个页面中都能使用的入口文件中去,再填入client的配置,下面的配置指定了访问的url

    entry:{
        'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
        'index':['./src/page/index/index.js'],
        'login':['./src/page/login/index.js']
      },

    2.修改output配置:
    坑就在这里,大家都知道output中的path是打包后文件放置的地方,并不是url访问文件的路径,而热更新需要提供出一个url访问文件的路径,所以还需要在多加一个 publicPath,对应的是url的路径

    output:{
        path:path.resolve(__dirname, 'dist'),//存放文件的路径
        publicPath:'/dist/',//访问文件的路径,这里的根路径是根据url来的,比如访问http://localhost:8088/dist/,那么就是对应/dist/
        filename:'js/[name].js'
      },

    - 在命令行输入

    如果想像下面那样输入命令的话,你要确保你在全局安装过webpack-dev-server

    webpack-dev-server --inline --port 8088

    之后就在浏览器中打开http://localhost:8088/
    就能实现实时加载了

    截止到这一步,仅仅是简单的实现了自动刷新,但是并不能满足日常的开发

    webpack-dev-server自动刷新,只是我们在开发时候需要的一个工具;

    而在上面的entry,入口配置中,配置了
    'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
    打包的时候也会把入口的本地url打包到线上,显然是没有用的

    解决方法:

    在Node.js中,可以进行环境变量配置

    那么接着打开刚刚修改好的webpack.config.js

    1. 配置一个环境变量,这个变量取值是 devonline
    // 环境变量配置,取值dev 或online
    let WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';
    
    const configs = {............

    2.然后更改一下entry配置项,去掉写死的url

    const configs = {
        entry:{
                'common':['./src/page/common/index.js'],
                'index':['./src/page/index/index.js'],
                'login':['./src/page/login/index.js']
              },
        .......
    }

    3.更改 output配置

    output:{
        path:path.resolve(__dirname, 'dist'),
        //更改的此处
        publicPath:'dev' === WEBPACK_ENV ? '/dist/' : '',
        filename:'js/[name].js'
      },

    4.在configs输出之前,对之前声明的WEBPACK_ENV的值判断一下
    如果是开发环境,那么我们就配置url读取路径

    if('dev' === WEBPACK_ENV){
        configs.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
    }

    关键来了,WEBPACK_ENV是如何赋值的呢?

    我们在启动这个项目的时候去赋值的,

    输入命令行,启动项目并赋值给WEBPACK_ENV

    npm run set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088

    这一大串的命令行真的看上去很讨厌,

    package.json

    "scripts": {
        "dev": "set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088",
        "build": "webpack"
      },

    之后就可以愉快的输入命令

    npm run dev
    展开全文
  • webpack更新无效解决,页面刷新

    千次阅读 2019-02-15 22:17:28
    问题:控制台输出, 但页面内容并没有进行热加载 [WDS] App updated. Recompiling... [WDS] App hot update... ... 报错:  Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._...
  • webpack自动编译

    千次阅读 2017-10-06 14:32:42
    webpack自动编译
  • webpack-dev-server能自动刷新问题

    千次阅读 2017-07-11 16:06:03
    使用webpack-dev-server中遇到能浏览器无法自动刷新的问题;寻找多方答案后明白了一些;下面有一些需要注意的点:1.webpack-dev-server并能读取你的webpack.config.js的配置output!!你在webpack.config.js里面...
  • 利用webpack实现对html文件的热更新

    千次阅读 2018-04-11 19:35:55
    webpackwebpack-dev-server是一个简单的web服务器,可以帮助我们实现代码的热更新,即在实际开发中只需保存修改完后的代码,不用手动刷新页面就可以看到效果。在使用webpack-dev-server时,会发现在对js、css文件...
  • 在dev-server.js里面 var hotMiddleware = require('webpack-hot-middleware')(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation...
  • 解决webpack html 能自动刷新的问题

    千次阅读 2019-06-13 18:28:30
    很久之前出于项目需要,做了一个多页面webpack3配置,遇到在dev-server开发时html能修改自动更新的问题,多方查找后勉强找到了一个折中的方法,美观算但是能凑合着用,这段时间看webpack4页稳定了而且据说都快...
  • 1.安装依赖webpack项目依赖npm和nodejsbrew install npm npm install node检查版本npm -v node -v2.安装webpack1.全局安装:具体位置如下图npm install webpack -g2.局部安装:当前项目中安装,比如桌面有个webpack...
  • 使用webpack构建前端开发环境,可以直接使用webpack构建本地服务,实现页面保存自动刷新。 模块安装 首先安装webpack-dev-server模块 npm install --save-dev webpack-dev-server 安装完成后然后修改webpack...
  • webpack4.x实现热更新

    千次阅读 2019-05-01 19:07:22
    更新前言环境目录未启动热更新效果代码启用热更新效果代码 ...然我们仅仅修改了一个文件就刷新了整个页面,这样的操作太划算了,此时可以用到 webpack-dev-server 的热更新功能。 环境 初始化 yarn...
  • 1.clone 代码git clone git@github.com:liqianglai/JavaScript-study.git2.全局安装npm install -g webpack webpack-dev-server typescript2.安装项目依赖cd typescript-webpack && npm install3.编译、运行npm run ...
  • webpack面试题总结

    万次阅读 2018-11-10 11:49:00
    本文主要是对webpack面试会常被问到的问题做一些总结,且文章会不断持续更新 1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 2.webpack的优势 (1) webpack 是...
  • hot 和 hotOnly 的区别是在某些模块支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败
  • 前言webpack-dev-server配置热更新看起来很简单,但是实际上是有很多坑的,目前为止我没有搜到一篇深入讲解这个的,如果你觉得它很简单,那么或许等你看完这篇文章你会有一样的看法。 由于HMR非常强大,本来这篇...
  • 配置webpack-dev-server

    千次阅读 2019-06-19 18:15:21
    1.相关概念 webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的...自动刷新指当修改代码时webpack会进行自动编译,更新网页内容 热替换指运行时更新各种模块,即局部...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    JS(.js .jsx .coffee .ts(TypeScript中间语言,能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -> .scss 类似于.less)  Images(.jpg .png .gif .bmp .sv...
  • webpack热模块替换(HMR)/热更新

    万次阅读 2017-03-17 22:15:45
    这是一篇关于webpack热模块替换的最简单的配置(需要react),也称作热更新
1 2 3 4 5 ... 20
收藏数 13,515
精华内容 5,406
关键字:

webpack 刷新页面不更新js