webpack-dev-server与HRM

起因

不理解下面这句话的意思= =

“html文件默认不能使用HMR功能，同时会导致问题：html文件不能热更新(不用做HMR功能)”

参考文章

参考文章1

参考文章2

webpack-dev-server

webpack-dev-server只能用于开发环境，不能用于生产环境。webpack-dev-server其实提供了一个简单的web服务器，使得打包后的文件能够在该服务器上运行，并且实现了实时更新的功能。

打包后的文件：webpack-dev-server只会在内存中编译打包，不会有任何输出

实时更新：我们改动css，js文件之后保存，webpack-dev-server会自动帮我们打包文件到内存，并且自动帮我们刷新页面，改变页面视图

使用webpack-dev-server：

第一步：在webpack.config.js文件中配置

  devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true, //启动压缩
    port:3000, //指定端口号
    open:true //自动打开浏览器
  }

第二步：在package.json文件中配置

"scripts": {
  "dev": "webpack serve"
},

第三步：启动npm run dev

HMR

Hot Module Replacement当你对代码修改并保存后，webpack将代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。

就是说使用webpack-dev-server可以实现修改文件，页面实时更新的功能，但是更新需要刷新页面。而配置上HRM之后，更新页面不需要刷新页面就能实现。换句话说：就是配置了HMR了话只会重新打包执行修改了的这个文件，其他文件不会打包执行，速度更快；而刷新页面的话所有文件都会重新打包执行。

如果页面的内容较多，刷新页面变的浪费时间。我们希望在弹窗不关闭的情况下，更新页面部分内容，这就需要配置热更新HRM。

配置方法是在devServer添加hot:true。注意：修改了webpack.config.js文件需要重新启动devServe

devServer:{
  contentBase:resolve(__dirname,'build'),
  compress:true, //启动压缩
  port:3000, //指定端口号
  open:true, //自动打开浏览器
  hot:true //开启HMR功能
}

所以 ==>

“html文件默认不能使用HMR功能”

这句话的意思应该是：修改了html文件，必须要刷新页面才能更新。

“同时会导致问题：html文件不能热更新(不用做HMR功能)”

这句话的意思应该是：修改了html文件，虽然配置了webpack-dev-server(有实时更新功能)，也不会更新页面。

测试：

在终端输入npm run dev启动webpack-dev-server

在启动的页面按F12可以看到下面的界面

当我们修改html.index文件，添加<h1>修改html文件</h1>语句，并ctrl+s进行保存时,可以看到终端显示webpack-dev-server重新编译了,但是页面并没有更新。

解决办法：

修改webpack.config.js文件的入口配置为

entry:['./src/js/index.js','./src/index.html'],

效果：

修改html.index文件，添加<h1>修改html文件</h1>语句，并ctrl+s进行保存时,可以看到页面更新了！

js/css文件

• 样式文件只要配置了hot:true就能使用HMR，因为style-loader内部已经实现了

• js文件配置了hot:true还不够，还需要修改js代码，修改方法如下

  if(module.hot){
    //一旦module.hot为true，说明开启了HMR功能。 ----> 让HMR功能代码生效
    module.hot.accept('./print.js', function(){
      //方法会监听 print.js 文件的变化，一旦发生变化，其他默认不会重新打包构建
      //会执行后面的回调函数
    })
  }