webpack --- webpack和webpack-dev-server众问题

最新推荐文章于 2024-06-27 16:01:23 发布
最新推荐文章于 2024-06-27 16:01:23 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bylifan/article/details/99440031
版权

报错信息：

peerDependencies WARNING webpack-dev-server@^2.9.7 requires a peer of webpack@^2.2.0 || ^3.0.0 but webpack@4.39.1 was installed
peerDependencies WARNING webpack-dev-server@2.11.5 › webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but webpack@4.39.1 was installed

 全部报错信息：

这个报错原因是因为webpack-dev-server需要本地的webpack文件

方法一：直接安装对应版本webpack（代码不演示了）

方法二：将整个node_modules文件夹删除，重新安装：

删除后打开package.json

将webpack和webpack-dev-server的兼容版本写好(本地版本不要太高,按照报错兼容版本来),像我需要jquery包,也写进去然后执行命令行

cnpm i

这个命令就能把需要的本地包安装一遍

然后再确认一遍package.json已经把webpack-dev-server添加了

最后执行

 cnpm run dev

做了这么多应该没错了,如果用了方法一报了这个错

就把方法二做一遍.

如果弹窗如下就基本搞定了,接下来和我一样的萌新继续

明明已经成功每次保存也有显示,但是网页不会变,是因为工具将bundle.js的路径改变成根目录了(红线),只需将html中的路径改一下即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


  <!-- <script src="../dist/bundle.js"></script> -->
  <script src="/bundle.js"></script>


</head>
<body>
  <ul>
    <li>第1</li>
    <li>第2</li>
    <li>第3</li>
    <li>第4</li>
    <li>第5</li>
    <li>第6</li>
    <li>第7</li>
    <li>第8</li>
    <li>第9</li>
    <li>第10</li>
  </ul>
</body>
</html>

 

bylifan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目搭建与部署
qq_56133427的博客
09-28 2197
Active code page: 65001 C:\Users\dell>node -v v16.10.0 C:\Users\dell>npm -v 7.24.0 C:\Users\dell>cnpm -v 'cnpm' is not recognized as an internal or external command, operable program or batch file. C:\Users\dell>npm install -g cnpm -registr
webpack-dev-server@2.11.5@webpack-dev-server/client/index.js错误
yijie_0_的博客
05-08 7300
今天运行vue项目遇到的一个问题，查了很久百度还是没有查到原因 最后一个一个文件排查，在webpack.base.conf.js找到了配置没有安装的插件，把下方注释掉就好 解决答案：查出没有安装的插件但又引用了的 ...
nodejs 在执行 npm install 的时候出现问题
weixin_51578439的博客
12-24 2891
今天拉取公司前端项目之后，执行 `npm install` 后出现了一下问题 gyp ERR! configure error gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable. gyp ERR! stack at PythonFinder.failNoPython (D:\user\desktop\ylz\code\ylz-hd-vue\node_mod
webpack+webpack server入门
最新发布
风火一回，一生不毁
06-27 950
webpack 基础使用，以及webpack server入门配置。
下载安装webpack-dev-server报错问题解决
MyDilrabaSister的博客
10-09 6826
在本项目目录下输入: npm i webpack-dev-server 先来看一下报错的提示: npm WARN webpack-dev-server@3.8.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN webpack...
webpack-dev-server 安装中出现的问题
weixin_44684357的博客
11-01 661
webpack-dev-server 依赖于webpack，所以安装的时候对webpack和webpack-cli版本有一定要求 1， cnpm i webpack-dev-server -D 2， 查看warning提示，指定的webpack版本进行安装 cnpm i webpack@XXXX -D 3， 在 webpack.json scripts中添加 scripts:{"dev": "webpack-dev-server"} 4， 执行 npm run dev 可能出现的错误：解决：1，删除nod
webpack打包
weixin_30344795的博客
01-15 74
安装webpack并使用打包 1. 全局安装webpack，执行初始化命令 # 全局安装 安装最新版本 @4.28.4,这样会有兼容性问题，所以选择安装 @3.8.1版本npm i webpack@3.8.1 -g# npm 初始化npm init -y 2. 安装jquery # 安装jquery npm i jquery -D 3. 安装webpack-dev-se...
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins**
weixin_43750031的博客
11-20 3万+
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins** mac 安装webpack 报错 建议安装较低版本的webpack eg: * npm install webpack@3.0.0 -g
peerDependencies WARNING webpack-cli@* requires a peer of webpack@4.x.x || 5.x.x but none was instal
weixin_41814742的博客
12-26 6667
peerDependencies WARNING webpack-cli@* requires a peer of webpack@4.x.x || 5.x.x but none was installed解决方案 1.问题如下：安装webpack-cli时，出现 只需要安装图片中指定的4.x.x或者5.x.x即可
requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed.版本兼容问题
Maix_Y的博客
11-20 2万+
这是webpack版本不兼容引起的，重新安装正确版本的webpack $ npm install webpack@x.x.x -g
vue.js 配置webpack-dev-server 的错误解决方法
lhb_11的博客
05-09 4万+
webpack进阶之loader篇解决如下：源webpack.config.js中如下： devServer: { historyApiFallback: true, hot: true, inline: true, progress:true },
webpack中版本兼容性问题错误总结
weixin_42679187的博客
05-07 2900
1.安装webpack-dev-server报错，说需要webpack-cli原因，这两个之中某一个版本太高，重新安装低版本 2.安装webpack-cli之后仍然不能使用 3. npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer de...
Vue: Webpack 版本安装出现的问题
科技向善
12-19 3434
在安装Webpack的过程中，可能会出现版本冲突，导致出现错误：如 npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself. 具体参考https://www.cnblogs.com/Smiled/...
npm install 错误信息：npm ERR! Windows_NT 6.1.7601
YEYEYE的博客
10-20 4718
错误信息： Administrator@RDW9ENH8W4DMER2 MINGW64 /e/mygit/mmall-fe (mmall_v1.0) $ npm install --save-dev file-loader npm WARN peerDependencies The peer dependency webpack@^2.0.0 || ^3.0.0 included from fi
npm安装webpack时,报错npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed.
miracle
04-09 3万+
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.那么先使用npm install -g npm-install-peers后再安装npm install webpack 就不会报错...
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins**
ioszhanghui的博客
06-11 1万+
在Vue安装webpack时，遇见了上面的提示，可以安装一个较低的版本： npm install webpageck@3.0.0 -g 如果提示有权限问题，可以使用 sudonpm install webpageck@3.0.0 -g 学习博客:https://blog.csdn.net/weixin_43750031/article/details/84307507 ...
npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x
阿莹yes的博客
05-11 1850
问题详情： /usr/local/bin/webpack-cli -> /usr/local/lib/node_modules/webpack-cli/bin/cli.js npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself. 问题翻译： npm WARN webpack-cli@3.3.11要求
解决webpack5下使用webpack-dev-server报错
peter_hzq的博客
11-13 5613
先说下我使用的版本 "webpack": "^5.4.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" 使用 npx webpack-dev-server 运行会报Error: Cannot find module 'webpack-cli/bin/config-yargs'这样的错误。 解决方法一： webpack-cli的版本降为3.3.12 解决方法二： 使用npx webpack serve这个命令运行。 ...
npm，webpack学习中遇到的各种问题
热门推荐
高山上的鱼
11-19 8万+
问题1：端口被占用  npm start > @ start /Users/qingtian/Desktop/dva/examples/user-dashboard > dora --plugins "proxy,webpack,webpack-hmr"           proxy: load rule from proxy.config.js (node:853
webpack webpack-cli webpack-dev-server配置
08-16
对于Webpack的配置，你需要安装一些必要的依赖包。首先，确保你已经安装了Node.js和npm。然后，可以通过以下步骤来配置Webpack： 1. 创建一个新的项目文件夹，并在终端中导航到该文件夹中。 2. 初始化一个新的npm项目，运行以下命令并按照提示进行配置： ``` npm init ``` 3. 安装Webpack及其相关依赖： ``` npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devServer: { contentBase: './dist', }, }; ``` 上述配置指定了入口文件为`src/index.js`，输出文件为`dist/bundle.js`，并启用了开发服务器。 5. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "start": "webpack serve --open", "build": "webpack" } ``` 上述配置允许你使用`npm start`命令来启动开发服务器，并使用`npm run build`命令来构建生产环境的打包文件。 至此，你的Webpack配置已经完成。你可以根据自己的需求进行进一步的配置，例如添加其他加载器和插件等。记得在项目中创建`src/index.js`作为入口文件，并在其中编写你的应用代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值