使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题；寻找多方答案后明白了一些；

下面有一些需要注意的点：

1.webpack-dev-server并不能读取你的webpack.config.js的配置output！！

你在webpack.config.js里面的配置output属性是你用webpack打包时候才起作用的，对webpack-dev-server并不起作用

2.webpack-dev-server打包生产的文件并不会添加在你的项目目录中！！

它默认打包的文件名是bundle.js，不会真的出现在你的项目目录中，据推测应该是保存在自己的环境中

自动刷新的配置方法（inline模式）：

我习惯的做法是在项目的package.json里面添加

 "scripts": {

     "start": "webpack-dev-server --inline --content-base ."

  }

这样通过npm start命令就能启动 inline模式了，当然也可以具体的输入webpack-dev-server命令

关键的是你的index.html也就是你的项目入口的html文件里面引用这个bundle.js文件需要直接引用根目录下面的！

<body>

    <div id="app"></div>

	<script type="text/javascript" src="bundle.js"></script>

</body>

不能引用你webpack配置的bundle.js文件目录，webpack配置的这个bundle.js文件，只有在你手动打包webpack之后才会改变！

总结下就是：webpack里面配置的bundle.js需要手动打包才会变化目录可以由你自己指定！webpack-dev-server自动检测变化自动打包的是开发环境下的bundle.js，打包路径由你的contentBase决定！两个文件是不一样的

webpack学习（三）之web-dev-server不能自动刷新问题的更多相关文章

  1. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  2. SpringCloud学习之Bus消息总线实现配置自动刷新（九）

    前面两篇文章我们聊了Spring Cloud Config配置中心,当我们在更新github上面的配置以后,如果想要获取到最新的配置,需要手动刷新或者利用webhook的机制每次提交代码发送请求来刷新 ...

  3. Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  4. webpack 学习三 模式

    开发环境(development)和生产环境(production)的构建目标差异很大.在开发环境中,我们需要具有强大的.具有实时重新加载(live reloading)或热模块替换(hot modu ...

  5. webpack学习三——output

    output的两个参数filename,path 一.path输出路径,输出路径要绝对路径,否则报错.做法如下: path:__dirname + 'path' 二.filename 输出文件命,相对 ...

  6. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  7. webpack学习记录 - 学习webpack-dev-server（三）

    怎么用最简单的方式搭建一个服务器? 首先安装插件 npm i --save-dev webpack-dev-server 然后修改 packet.json 文件 "scripts" ...

  8. webpack学习笔记 (三) webpack-dev-server插件和HotModuleReplacementPlugin插件使用

    webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. we ...

  9. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  10. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

随机推荐

  1. volatile关键字和synchronized关键字

    volatile关键字: 可以用来修饰字段(成员变量),就是告知程序任何对该变量的访问均需要从共享内存中获取,而对它的改变必须同步刷新回共享内存,它能保证所有线程对变量访问的可见性. synchron ...

  2. 关于js中两种定时器的设置及清除（转载）

    1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...

  3. STL部分的实现

    C++的STL很强大,里面实现很多功能 就平时经常会用到的vector之类的,自己实现一下, 有哪块错误的希望大神给予指点 vector类模板 template<typename T>cl ...

  4. SQL Server数据库读取数据的DateReader类及其相关类

    之前学了几天的SQL Server,现在用C#代码连接数据库了. 需要使用C#代码连接数据库,读取数据. 涉及的类有: ConfigurationManage SqlConnection SqlCom ...

  5. Screen的简单使用

    第1步:新建窗口 输入: screen [-S <作业名称>] 第2步:随便干些什么 在窗口中执行任意命令,干什么都行 第3步:挂起窗口 Ctrl + a d 第4步:还原窗口 scree ...

  6. 关于window service2008系统iis部署访问证书，内部错误

    近期因为在做微信支付系列,做到退款的时候需要通过把数据流通过证书post过去的时候,win7.win8.xp部署在iis都没问题.但是部署到服务器 2008的时候就出现了内部错误. 折腾许久,总算找到 ...

  7. c++学习笔记之继承篇

    title: c++学习笔记之继承篇 date: 2017-03-26 16:36:33 tags: [c++,继承,public,virtual,private,protected] categor ...

  8. Unity 3D Framework Designing(3)——构建View和ViewModel的生命周期

    > 对于一个View而言,本质上是一个MonoBehaviour.它本身就具备生命周期这个概念,比如,Awake,Start,Update,OnDestory等.这些是非常好的方法,可以让开发者 ...

  9. 开源 & 在线免费使用：升讯威 周报系统

    这个周报系统大约写于2015年,缘起当时所带的开发团队需要逐步建立或完善一些项目管理方法. 在调研了网上的诸多项目管理或周报/日报管理系统之后,并没有找到符合当时情况的系统,这里最大的问题不是网上既有 ...

  10. 分布式文件管理系统_FastDFS集群

    简单介绍 1,client storage tracker的关系 先用一幅图来解释用户如何访问一个通过DFS管理的文件 一般来说,一台服务器只有一个storage server,多个storage s ...