webpack-dev-server不好使的原因

已于 2022-01-28 16:36:41 修改
阅读量679 收藏
点赞数
分类专栏： 前端 文章标签： webpack node.js 前端
于 2021-12-06 23:24:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a444477/article/details/121758801
版权

在体验webpack5发现了个坑点，之前项目示例中webpack4的contentBase使用不了。下图属性已经被取代。

请添加图片描述

改用 static请添加图片描述

请添加图片描述

张登辉的奇妙旅程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-dev-server配置失败的原因
a125129167的博客
06-24 3629
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。 主要提供了2个功能： 为静态文件提供服务 自动刷新和热替换(HMR) 一般的项目文件结构为: |--src | |--views | |--index.js | |--module_a | |--list.js | |--module_b
【webpack5】webpack-dev-server 不能正常启动
小笼包不是包的博客
01-29 2908
【webpack5】webpack-dev-server 不能正常启动 一、问题 webpack-dev-server --open --config script/webpack.dev.js webpack4环境下可以正常启动，但是升级webpack5后依赖都要升级，再跑这个指令就会报错： internal/modules/cjs/loader.js:584 throw err; ^ Error: Cannot find module 'webpack-cli/bin/confi
浅谈webpack配置中output的publicPath属性和devServer的publicPath属性
dcwang316的博客
12-12 3447
长期以来，一直都比较迷惑，不知道publicPath属性的作用，最近抽空，花了点时间研究了下，参考了几篇文档，自己测试了几遍，最后得出了以下几点心得，如有不对，欢迎佐证。 1.当手动创建html时，也就是当我们的工程中，存在一个index.html 工程结构 <!DOCTYPE html> <html lang="en"> <head> <me...
解决：输入npx webpack-dev-server指令后报错 Error: Automatic publicPath is not supported in this browser
cake_eat的博客
10-29 269
解决方法：在output里面加上 publicPath:'./'
解决webpack5.0以上版本使用webpack-dev-server报错问题
Lloveyy的博客
08-05 1259
解决webpack5.0以上版本使用webpack-dev-server报错问题 webpage、webpack-dev-server、webpack-cli的版本如下： { "webpack": "^5.48.0", "webpack-dev-server": "^3.11.2", "webpack-cli": "^4.7.2" }, 配置webpack.config.js devServer: { port: 8080, contentBa
关于webpack配置webpack-dev-server 报错问题。Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
qq_40922656的博客
04-14 452
配置情况 自动编译并运行，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行 安装 loader； npm install webpack-dev-server --save-dev webpack配置文件； 添加 devServer 服务后需要调整输出的路径 publicPath: ‘/’ 增加 devServer 配置 devServer: { open: true, // 自动打开浏览器 compress: true, // 启动gz
vue cli&webpack：无法运行webpack-dev-server
weixin_44465420的博客
05-24 734
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体...
关于webpack-dev-server遇到的问题
weixin_43135973的博客
11-21 355
从零开始使用 webpack 构建项目遇到的问题
webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js
weixin_30432179的博客
05-02 339
今天学习了dev-server这个配置，中间遇到疑惑，我写了contentBase是可以走通，可以再localhost:8080看到页面并且正确加载bundle.js的， 但是这个contentBase并不是必须的，不写按理说也可以实现显示页面并且加载js,但是我去掉后，可以编译成功，但是我这里就遇到问题了，一直提示找不到bundle.js。 我的目录设置如下： 其中index.html...
webpack-使用webpack-dev-server.rar
04-12
然后，在 `webpack.config.js` 配置文件中添加 `devServer` 配置项： ```javascript module.exports = { // 其他配置... devServer: { contentBase: './dist', // 指定静态资源目录 hot: true, // 开启热模块...
webpack-dev-server自动更新页面方法
11-26
为了使 Webpack Dev Server 能够监听这些文件的变化并自动更新页面，你需要在配置文件中设置 `publicPath`： ```javascript module.exports = { // ... output: { path: path.resolve(__dirname, 'dist'), // ...
详解webpack-dev-server的简单使用
08-27
* 在 webpack.config.js 中添加 devServer:{inline:true} 2. 当以 Node.js API 启动 Webpack-dev-server 时，我们也需要做两点： * 由于 Webpack-dev-server 的配置中无 inline 选项，我们需要添加 webpack-dev-...
详解Webpack-dev-server的proxy用法
10-18
主要介绍了详解Webpack-dev-server的proxy用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack-dev-server：提供一个webpack应用。 根据更改更新浏览器。 文档https：webpack.js.orgconfigurationdev-server
02-05
webpack-dev-server 将与提供实时重载的开发服务器一起使用。 这应该仅用于开发。 它在使用了 ，它提供对webpack资产的快速内存访问。目录入门首先，安装模块： npm install webpack-dev-server --save-dev 注意：...
webpack contentBase 属性错误
weixin_47902184的博客
05-09 290
webpack contentBase错误
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that d
m0_61582755的博客
02-18 2892
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
桃子叔叔为您解析webpack-dev-server主要的配置属性
热门推荐
franktaoge的博客
04-25 1万+
webpack-dev-server 配置属性 众所周知webpack-dev-server有三种配置方式，有配置文件方式、package.json方式和纯node的API实现方式，桃子叔叔推荐使用的是第一种：webpack.config.js输出对象中的devServer属性中写配置。其中的原因也是很简单，这种方式最有利于大型前端项目的部署和后期维护，为什么呢？balabalabala～～～～...
webpack serve 正常启动但没效果
goodman2980的博客
08-08 1354
安装完 webpack-dev-server 后 配置webpack.config.js。然后 npm run dev，服务器正常启动，且保存修改index.js有反应。但是打开网页却发现js的修改对网页没有效果。在package.json中配置。
[webpack]path、publicPath、--content-base 理解
记录日常二三事
11-07 862
'use strict'; var webpack = require('webpack'); var path = require('path');//CLI：webpack-dev-server --content-base publicmodule.exports = { entry: path.join(__dirname,"src","entry.js"), output: {
Error: Cannot find module '\webpack-dev-server\bin\webpack-dev-server.js'
最新发布
03-08
这个错误是由于找不到webpack-dev-server模块引起的。webpack-dev-server是一个用于开发环境的轻量级服务器，用于实时重新加载和热模块替换。当你在命令行中运行webpack-dev-server时，它会尝试在node_modules目录下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值