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 文件的变化，一旦发生变化，其他默认不会重新打包构建//会执行后面的回调函数})
}

webpack-dev-server与HRM相关推荐

WEBPACK DEV SERVER
文/tsyeyuanfeng(简书作者) 原文链接:http://www.jianshu.com/p/941bfaf13be1# 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者& ...
webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
Invalid options object. Dev Server has been initialized using an options object that does not match
Invalid options object. Dev Server has been initialized using an options object that does not match ...
Invalid options object. Dev Server has been initialized using an options object
启动webpack报错: [webpack-cli] Invalid options object. Dev Server has been initialized using an options ...
Webstorm中提示Cannot find module 'webpack.dev.conf.js'
问题描述: 在Webstorm中运行cordova项目时,提示: Cannot find module 'webpack.dev.conf.js' 先不要着急删掉node_modules,然后重新np ...
Vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
ValidationError: Invalid options object. Dev Server has been initialized using an options object tha ...
vue:hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
运行vue项目是报错: hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.con ...
出现`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`报错
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...

webpack-dev-server与HRM

起因

参考文章

webpack-dev-server

HMR

js/css文件

webpack-dev-server与HRM相关推荐

最新文章

热门文章