webpack实时重新加载

简介: webpack实时重新加载

还是先看版本对应号 版本不对应 否则会报错
在这里插入图片描述

不使用webpack打包热加载问题

**每一次手动打包很麻烦,打包后还需要手动刷新浏览器。
采用 webpack 提供的工具: webpack-dev-server ,它允许在运行时更新所有类型的模块后,而无需手动打包和刷新页面,会自动打包和刷新页面。可以很大程度提高开发效率。**
1.先安装依赖
webpack-dev-server 为你提供了一个基本的 web server,并且具有 live reloading(实时重新加载) 功能。设置如下:

npm install --save-dev webpack-dev-server@3.7.2

2.在webpack.config.js文件中输入以下代码:

  devServer: { 
    
        contentBase: './dist', //时时重新加载
        //安装的最新版本的话使用contentBase会报错使用static解决
        //static: "./dist",
    },

新版本使用contentBase报错
在这里插入图片描述

2.在package.json文件下输入

   "scripts": {
    "build": "webpack",
    "show": "webpack -v",
    "watch": "webpack --watch",//自动编译
    "dev": "webpack-dev-server --open"//打开刷新浏览器
  }

这样当你修改自己的代码文件的时候保存就会自动编译并且打开浏览器

相关文章
|
1月前
|
前端开发 JavaScript 数据可视化
Webpack加载器和插件之间有什么区别
【10月更文挑战第13天】Webpack加载器和插件之间有什么区别
|
资源调度 JavaScript
Vue npm yarn webpack 遇到无法加载文件禁止运行脚本解决方案
Vue npm yarn webpack 遇到无法加载文件禁止运行脚本解决方案
159 0
Vue npm yarn webpack 遇到无法加载文件禁止运行脚本解决方案
|
缓存 JavaScript 前端开发
webpack5资源最佳加载方案
在前面几篇文章中,我们已经学会基础的运用webpack与webpack-cli从0到1搭建一个简单的react或者vue工程应用,这其中我们使用了加载文件,我们在之前处理文件使用file-loader或者url-loader处理,url-loader主要是可以针对图片文件大小进行有选择的base64压缩,在webpack5中可以用内置的Asset Modules来处理图片资源
199 0
webpack5资源最佳加载方案
|
前端开发 JavaScript 数据格式
使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeescript或者j...
1014 0
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
133 60
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
1月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
1月前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命