首先需要在package.json中配置一个脚本参数 --hot

"dev": "webpack-dev-server --mode development --hot"

运行项目 npm run dev

在入口文件还要增加这样的代码

if (module.hot) {
module.hot.accept()
}

如果不想通过脚本参数设置热更新的话,还可以在webpack配置里面配置

  plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
// --hot 等于这样的写法
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}

webpack设置热更新的更多相关文章

  1. webpack的热更新

    webpack的热更新是如何做到的?说明其原理? webpack的热更新又称热替换(Hot Module Replacement),缩写为HMR. 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉 ...

  2. webpack实现“热更新”和“热加载”(webpack3.6新增)

    之前的博文有提到怎么样去实现热更新,但是居然要用到另外一个node框架(express)而且新增了一个入口(entry)两个插件(plugin)来实现,大大提高了配置的复杂度,这样其实对使用webpa ...

  3. Webpack的热更新是如何做到的?原理是什么?

    一.是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换.添加.删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模 ...

  4. webpack添加热更新

    之前的wbepack一直没有加上热更新,这是一种遗憾,今天终于加上去了,看不懂我博客的可以看这篇文章:http://blog.csdn.net/hyy1115/article/details/5302 ...

  5. 关于webpack下热更新?&自动刷新?的小记(非vue-cli)

    写本随笔时:webpack4.6.0 为何标题用?号,因为老衲也不知是否用词正确,大概是这样的说法: webpack4.0引入生产模式和开发模式,在开发时使用 webpack 打包后不压缩,所以只需要 ...

  6. Webpack 多html入口、devServer、热更新配置

    一.clean-webpack-plugin: 在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦) 1.安装clean-webpack-plugin   npm/cnpm i c ...

  7. koa2 + webpack 热更新

    网上有很多express+webpack的热更新,但是koa2的很少,这两天研究了一下子,写一个简单的教程. 1.需要的包 webpack:用于构建项目 webpack-dev-middleware: ...

  8. webpack热更新 同时导出文件到本地

    webpack 配置热更新后,文件配置导出到本地 安装 npm i webpack-dev-server-output --save-dev 引入 const WebpackDevServerOutp ...

  9. Cocos2d-js 热更新学习笔记

    转载至: http://blog.csdn.net/pt_xxj/article/details/68927705 为什么还要再写一篇关于cocos2d js热更新的笔记,最单纯的想法就是记录心得,另 ...

随机推荐

  1. 洛谷P3959 宝藏

    去年NOIP第二毒瘤(并不)的题终于被我攻克了,接下来就只剩noip难度巅峰列队了. 首先说一下三种做法:随机化,状压DP和搜索. 前两种做法我都A了,搜索实在是毒瘤,写鬼啊. 有些带DFS的记忆化搜 ...

  2. page-break-after:always不能正常工作

    https://stackoverflow.com/questions/9595412/ie7-ie8-page-break-afteralways-not-working 最近在打印网页的时候发现 ...

  3. TestNg 2.套件测试

    看一下我的目录结构,新建一个包,名字叫做suite,主要为了做套件的测试用.然后在resource下新建一个文件,一般的叫做testng.xml,我这里随便起个名字,叫做suite.xml. 运行的时 ...

  4. 0基础如何学Android开发

    链接:http://pan.baidu.com/s/1bIEIse 密码:ky7w https://pan.baidu.com/s/1i53bs6x提取码:0pwthttps://www.zhihu. ...

  5. linux下静态库和动态库的制作

    一.静态库 1.编写.c文件,在其中实现函数源代码,同时制作头文件 2.将.c文件转为.o文件             gcc -c xxx.c -o xxx.o 3.将*.o转换成库文件     a ...

  6. JS学习笔记Day2

    一.程序的三大结构 顺序结构:从上到下,从左到右依次执行每一条语句 选择结构:根据条件判断选择要执行的语句,出口只有一个 循环结构:满足一定条件,重复执行一段代码 二.选择结构 1.三元运算符:? : ...

  7. Tomcat 下载安装与配置

    一.下载 tomcat下载链接:https://tomcat.apache.org/ 1.进入tomcat官网后,选择需要下载的版本.我使用的是tomcat9,所以在这我选择tomcat9 2.选择z ...

  8. 如何解决串session:

    在IE快捷方式上点击鼠标右键>属性>快捷方式>目标:"C:\Program Files\Internet Explorer\iexplore.exe" -nome ...

  9. nGrinder Loadrunner vs nGrinder

    s d 功能 参数类型 取值方式 迭代方式 Loadrunner实现方式 nGrinder实现方式 参数化 文件  sequential (顺序取值) Each Iteration (每次迭代) 在参 ...

  10. linux shell变量的截取

    变量的截断,经常用到的是${},##和%%几个特殊符号.假设我们定义了一个变量为:file=/dir1/dir2/dir3/my.file.txt ,可以用${ }分别替换得到不同的值: ${file ...