webpack学习（三）之webpack-dev-server不能自动刷新问题

时间 2019-11-11

标签 webpack 学习 dev server 不能自动刷新问题繁體版

原文原文链接

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

下面有一些须要注意的点：html

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

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

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

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

 "scripts": {
     "start": "webpack-dev-server --inline --content-base ."
  }

这样经过npm start命令就能启动 inline模式了，固然也能够具体的输入webpack-dev-server命令npm

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

<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决定！两个文件是不同的app