初学webpack(4) 配置webpack-dev-server

最新推荐文章于 2024-08-10 22:58:28 发布
最新推荐文章于 2024-08-10 22:58:28 发布
阅读量268 收藏
点赞数
分类专栏： webpack配置系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42713144/article/details/119038228
版权
本文介绍了如何配置webpack-dev-server以搭建本地开发服务器，实现浏览器自动刷新功能。内容包括安装模块、配置webpack.config.js、修改package.json以及执行命令的详细步骤，并解决了webpack5下使用webpack-dev-server的兼容性问题。
摘要由CSDN通过智能技术生成

webpack

其他

webpack-dev-server

  • 可用于搭建本地服务器，基于node.js搭建，内部使用express框架，实现浏览器自动刷新显示修改结果。（类似于vscode的live server）
  • 缓存到内存中，发布时在存入硬盘
安装该模块

npm install webpack-dev-server --save-dev

请添加图片描述

配置webpack.config.js

在module.exports中添加

  devServer:{
   
    contentBase:'./dist',
    inline:true,
最低0.47元/天 解锁文章
IE_Oxygen2.0
关注
专栏目录
webpack-dev-server配置
webpack-dev-server
07-27 6629
最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化， 不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。webpack-dev-server的作用就是可以在 前端自己起一个服务，不用依托nginx,或者express等，更爽的是它可以实现实时更新，不用你去不停的F5刷新浏 览器。废话不多说，下...
webpack4系列笔记之（6）简单配置开发服务器 devServer
qq_42744920的博客
06-06 686
开发服务器devServer
devserver配置_Webpack4 常用配置详解
weixin_39601642的博客
11-21 332
入口、出口配置实现Webpack的打包最基本的就是配置好入口、出口，npm install webpack后在根目录创建webpack.config.js,代码如下： const SourceMap配置Webpack打包后如果文件出错会把错误指向打包后的文件中的某一行，而我们更需要知道是源文件哪一行出错，这时就需要配置source-map ,在moudule.exports加入以下配置项 mode...
Webpack中搭建本地服务dev-server
最新发布
weixin_47342624的博客
08-10 536
HMR Socket Server，是一个socket的长连接建立连接后双方可以通信，当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk），通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；webpack-dev-server 是运用另一个node 框架 express开启本地的静态资源服务，和开启Socket服务；
Webpack 4 学习04（配置webpack-dev-server）
weixin_33704591的博客
02-24 371
前提： Webpack 4 学习01（基础配置） ​ Webpack 4 学习02（通过配置文件打包） 一、了解 webpack-dev-server webpack-dev-server用来配置本地服务器 为 webpack 打包生成的文件提供web服务 自动刷新和热替换（HMR） 二、安装webpack-dev-server npm install --save-dev webpack...
webpack配置devServer
chen__cheng的博客
03-27 452
由于每次打包之后修改源文件都需要再次打包，无疑这种对于开发者来说是有点不方便的，所以webpack可以通过配置devServer（开发服务器）来进行自动化操作（自动编译，自动打开浏览器，自动刷新浏览器） 特点：只会在内存中编译打包，不会有任何输出，也即不会显示输出构建之后的目录，而运行结束自动清除内存 使用： 下载webpack-dev-server npm i -s webpack-dev-server 启动： npx webpack-dev-server 不同于webpack全局安装可以直
webpack 配置devServer 服务器
p1967914901的博客
01-21 365
webpack 配置devServer 服务器 /** * loader: 1. 下载 2. 使用（配置） * plugins：1. 下载 2. 引入 3.使用 */ // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // webpack 配置 // 入口起点 entry
webpack4配置demo
12-18
在这个“webpack4配置demo”中，你可能会看到如何配置这些核心部分，以及如何使用`npm`脚本启动开发服务器（如`webpack-dev-server`）实现热更新和实时编译。开发过程中，Webpack会监听文件变化并自动重新构建，提高...
webpack-simple-vue.zip
07-21
在解决热更新问题时，可能需要在这里添加或更新某些依赖，比如`webpack-dev-server`，它是实现HMR的关键组件，提供了运行开发服务器和自动刷新的能力。 `README.md`文件通常用来介绍项目、提供使用指南和开发说明，...
前端开源库-webpack-mix
08-30
npx webpack-dev-server --config path/to/mix.js 或 yarn webpack-dev-server --config path/to/mix.js ``` 4. **自定义配置**：如果需要更复杂的配置，可以在`mix.js`中添加更多选项，或者完全降级到Webpack...
webpack4+react配置多页面移动端应用程序
01-08
开发环境配置中，可以使用webpack-dev-server提供本地服务器，配合热重载功能（react-hot-loader）实现代码实时更新。Babel则负责将ES6+和jsx语法转换为浏览器可识别的JavaScript。在`.babelrc`文件中，设置preset为...
webpack4
qq_38210427的博客
05-16 462
为了让浏览器能够正确的解析, 我们需要使用 webpack 将我们的源代码进行打包。
webpack-dev-server 2.8.1 无法在IE10正常工作
ForeverCjl的专栏
10-26 3538
将webpack-dev-server的版本由2.7.1升级到2.8.1后，在IE10无法正常使用了。查看console发现webpack打包后的脚本报错，具体如下/* WEBPACK VAR INJECTION */(function(__resourceQuery) {/* global __resourceQuery WorkerGlobalScope self */ /* eslint pr
webpack5与webpack4之devSever配置 Invalid options object. Dev Server has been initialized using an optio
tuchunrong的博客
07-18 810
webpack报错Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src Module not found: Error: C...
热门推荐
weixin_40664145的博客
11-14 2万+
目录出错现象报错信息出错原因解决方案 出错现象 这个错误是我在用vue-cli中使用webpack打包的时候，进行环境分离操作，将webpack.config.js分成三个包 webpack.common.js webpack.dev.js webpack.prod.js 之后启动npm run serve（也就是webpack-dev-server --open）的时候报的错误，package.json文件是下面这样 "scripts": { "serve": "webpack-dev-ser
安装与配置webpack-dev-serve
m0_66504310的博客
11-27 5390
安装与配置插件 webpack-dev-serve
webpack4配置区分webpack --watch与webpack-dev-server
qq_21816073的博客
08-13 788
最近，利用webpack搭建一个简单的集成html，scss与js的脚手架，方便时常做一些简单的开发。 项目结构如下： --dist --src --scss index.html index.js package.json webpack.config.js 前提至少需要配置css规则和js规则，需要用到style-loader,css-loader以及scss-loader,同时需要安...
webpack和webpack-dev-server安装配置（遇到各种问题的解决方法）
weixin_30615767的博客
02-17 776
跟着Webpack傻瓜式指南（一）这个教程在安装webpack和webpack-dev-server的时候遇到很多问题，查了很多终于一一找到解决办法。 主要参考了这三篇博文： 　　moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 　　创建Webpack简单项...
vue-cli中webpack配置详解：入门与新版本对比
作者通过分享自己的实践经验，带领读者逐步理解关键配置文件，如`build/dev-server.js`。 首先，我们从`package.json`的`scripts`字段入手，这是项目运行的命令行入口。`"dev"`命令用于启动开发服务器，而`"build"`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值