解决webpack因新版本打包失败问题--ERROR in multi ./src/main.js ./dist/bundle.js

最新推荐文章于 2025-04-10 21:13:28 发布
最新推荐文章于 2025-04-10 21:13:28 发布
阅读量515 收藏
点赞数
分类专栏： 前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38698753/article/details/100147247
版权
本文详细介绍了如何使用Webpack 4.30.0版本进行项目打包，包括创建项目目录结构、初始化项目、编写测试代码、执行打包命令以及解决新版本命令不兼容的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

创建了一个webpacksty的目录，目录下放着dist，src子目录，然后通过node环境下，npm init -y 初始化项目出现package.json文件，src子目录下又存放着index.html和main.js文件，接下来尝试着在main.js输入一句代码当验证打包后续是否成功的过程：

1

console.log("ok");

　　

接下就是执行webpack打包命令了

把src下的main.js打包到dist下的bundle.js,执行命令：

webpack .\src\main.js .\dist\bundle.js
执行后：

 

报错了！此时也可以直接看出我的webpack版本号：4.30.0 ，算是新版本了。

当然此时查看结构目录下dist肯定没有bundle.js的文件出现，然后自己也是看别人的博客查询到了原来是版本过高，以前的命令已经不适用了，只要加-o就轻松解决原来。

webpack .\src\main.js -o .\dist\bundle.js
此时就执行成功了！

 

在dist目录下也自动生成了bundle.js的文件。

然后在index.html导入这个生成的文件，运行在浏览器查看

 

打包成功！

揭秘前端领域Webpack的懒加载技术
前端视界的博客
05-10 927
Webpack懒加载技术是现代前端性能优化的重要手段之一。理解懒加载的核心概念和技术价值掌握Webpack实现懒加载的多种方式学习如何在实际项目中应用懒加载优化性能了解懒加载的局限性和适用场景本文涵盖Webpack 4.x和5.x版本的懒加载实现，重点分析动态导入(Dynamic Import)技术。首先介绍懒加载的基本概念和Webpack的实现方式然后深入分析核心算法和实现原理接着通过实际案例展示具体应用最后探讨相关工具、资源和未来发展趋势懒加载(Lazy Loading)
解决webpack因新版本打包失败问题
qq_36235046的博客
02-06 907
现在webpack版本是4.x版本，之前3.x版本的打包方法是 webpack ./src/entry.js ./dist/bundle.js，会在dist目录下生成bundle.js 对于webpack4.x版本，使用该命令报错 解决方法是在不改变webpack版本情况下 加上 -o webpack src/entry.js -o dist/bundle.js ...
传统项目纯前端实现导出excel之xlsx.bundle.js
最新发布
qq_43016560的博客
04-10 445
自从vue问世后，使得前端开发更加简洁从容，极大的丰富组件样式和页面渲染效果，使得前端功能的可扩展性得到极大地加强。虽然vue的使用对于前后端分离的项目对于功能实现与扩展有了质的飞跃，但仍旧有些传统的项目步履维艰，功能延伸性开发束手束脚，效率相对低下，就比如在某些mvc+jsp页面要实现excel的导出功能，有时候会后端框架封装的约束，这个时候直接在前端实现excel导出，就变的极为方便。本文介绍一款js插件——xlsx.bundle.js
webpack main.js打包成yyyy.js报错找不到mian.js
weixin_43386594的博客
04-23 667
***命令：*F:\teach\xcEdu\xcEduUI01\xc-ui-pc-static-portal\webPack>webpack index.js buld.js Hash: fc0ca433ff23b6861bb4 ...
webpack生成bundle.js文件出错
m0_47506450的博客
03-22 1584
用webpack ./src/main.js ./dist/bundle.js 命令生成出现错误 解决办法：将webpack ./src/main.js ./dist/bundle.js 改成 webpack ./src/main.js -o ./dist/bundle.js ERROR in main Module not found: Error: Can’t resolve ‘./dist/bundle.js’ in ‘/Users/chenzhicheng/WebstormProjects/w
运行弹窗项目时，重新安装了cnpm i node-sass -D，也会出现同样的错误，有说是版本的问题，但修改后同样也会是同样的错误
weixin_40945354的博客
02-20 2100
ivyone@ivyonedeMacBook-Pro guagua % cnpm run serve > guagua@0.1.0 serve /Users/ivyone/hami77/guagua > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin ERROR Failed to compile with 1 error
webpack常见调试问题
qq_41117240的博客
03-19 1324
webpack打包常见问题 问题一： peerDependencies WARNING webpack-dev-server@* requires a peer of webpack@^4.0.0 || ^5.0.0 but webpack@3.8.1 was installed peerDependencies WARNING webpack-dev-server@3.10.3 › webpac...
Vue源码分析之-源码下载和打包调试
前端高薪进击手记
07-05 3520
目录准备工作1、vue.js源代码获取可以直接网页下载源代码：或者 通过git clone下载：个人推荐的阅读源码的方式：目录结构解读了解Flow调试设置打包安装依赖设置sourcemap执行dev进行开发构建调试打包结果如何调试 Vue.js：这里我们演示解读的是Vue.js 2.6版本，https://github.com/vuejs/vue.githttps://github.com/vuejs/vue.git 个人推荐的阅读源码的方式： 目录结构解读 首先我们git clone获取到的
webpack4 升级
u013262823的博客
03-15 1165
webpack4升级之坑 webpack4出来已经好久，看到之前的vue-cli项目还是基于"webpack": “^3.6.0”,所以参考了一些资料，对webpack3做了升级。 webpack版本升级 "webpack": "^4.29.6" cnpm i 或者 npm i ，依赖安装，npm run dev 看下效果，出现一堆的错误。不难发现是webpack-dev-server 导致： ...
Javascript Obfuscator代码混淆
08-19
一个简单的js代码混洗工具,配合我写的小程序就能一本万利,简单而又不失华丽的搞定代码混淆这道小工序!
webpack打包遇到的问题和解决方案
zzdoreen的博客
04-16 4080
目录 webpack命令打包提示 - The 'mode'option has not been set,webpack will falback to 'production' for this value.... webpack命令打包错误提示 - Module not found: Error: can't resolve '.\dist\bundle.js' in ......
Webpack初使用遇到的问题和打包
qq_38044335的博客
11-25 709
‘mode’ option has not been set 需要指定mode,一般情况下为生产环境和开发环境； 开发环境: webpack --entry ./src/index.js -o ./dist/ --mode development 生产环境：webpack --entry ./src/index.js -o ./dist/ --mode production 以上打包命令为webpack5命令 2.在终端输入webpack ./src/main.js ./dist/bundle.
[webpack]webpack打包文件出现 ERROR in multi ./src/main.js ./dist/bundle.js 错误的解决
m0_46470372的博客
03-09 1205
[webpack]webpack打包文件出现 ERROR in multi ./src/main.js ./dist/bundle.js 错误的解决 错误问题 某日，正兴致勃勃地跟着webpack视频进行打包操作的时候，视频上的操作成功了，而我却报了错误: ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error...
webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
m0_37477061的博客
07-03 6596
当输入命令：webpack .\src\main.js .\dist\bundle.js 报错如下： 来自本地 这是为什么呢？原因是我的webpack版本过高，原来的命令已经不适用了 如下查询版本号： 来自本地 那应该如何解决? 更换打包命令为: webpack ./src/main.js -o ./dist/bundle.js 其中 bundle.js是打包后生成的文件的...
学习Vue bug 一、webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
冯安晨
04-16 2322
一、先上错误代码 ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can't resolve '.\dist\bundle.js' in 'D:\Users\VScode\heima_vueHtml\Vue\黑马05天\07-webpack-study'l\Vue\黑马05天\07-webpack-stu...
安装WebDriverAgent时，执行bootstrap.sh脚本报错提示：ERROR in ./js/app.js的解决方法
dou_being的博客
06-14 1910
在安装WebDriverAgent时，执行bootstrap.sh脚本阶段报错，报错信息如图： 解决步骤如下： 1.修改WebDriverAgent目录下的Inspector目录中的webpack.config.js文件，去掉‘babel-loader’配置后的exclude:/node_modules/，如图所示，将红色框中的内容删除： 2.删除WebDriverAgent目录下的Inspector目录中的node_modules文件夹，如图所示，将红色框中的文件夹删除： 3.重新执行
* ./src/main.js in multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js、
03-08
<think>嗯，用户的问题是关于如何正确配置Webpack Dev Server来启动src/main.js文件。首先，我需要回忆一下Webpack的基本配置结构。根据引用[1]，项目结构通常包括package.json、webpack.config.js和src文件夹，里面包含index.html和index.js。用户可能已经按照这个结构搭建了项目，但遇到了Dev Server的问题。 接下来，用户提到在index.html中引用了错误的JS路径，如引用[4]中的例子，错误的script标签导致找不到JS文件。所以，我需要检查HTML中的路径是否正确。通常，使用HtmlWebpackPlugin可以自动注入正确的脚本路径，避免手动写路径出错。 然后，考虑webpack.config.js的配置。引用[2]指出，配置Dev Server时需要注意修改后重启，且配置不影响打包结果。用户需要确保devServer的contentBase指向正确的静态资源目录，比如src文件夹。另外，entry和output的设置是否正确？entry应该是src/main.js，output的path和publicPath也需要正确配置，否则Dev Server可能找不到生成的文件。 另外，查看引用[3]，用户可能需要拆分开发和生产环境的配置，但问题集中在开发环境。启动命令是否正确？比如使用npx webpack serve --config config文件路径，或者在package.json中配置scripts，方便运行。 还要注意publicPath的设置，在开发环境中通常设为'/'，这样Dev Server会从内存中正确提供文件。如果设置错误，比如相对路径，可能导致404错误。同时，检查是否安装了必要的依赖，如webpack-cli、webpack-dev-server，因为引用[1]提到需要本地安装这些包。 最后，综合这些步骤，应该能解决用户的问题。可能还需要检查是否配置了HtmlWebpackPlugin来自动生成HTML文件，避免手动引入JS文件导致的路径问题。如果用户仍然遇到问题，可能需要检查控制台错误信息，确认文件路径是否正确，或者是否存在其他配置错误。</think>### 分步解决方案：配置 Webpack Dev Server 启动 src/main.js 1. **基础环境搭建** 首先确保项目结构符合规范，安装必要依赖： ```bash npm init -y npm install webpack webpack-cli webpack-dev-server --save-dev ``` 创建目录结构： ``` ├── src │ ├── main.js # 主入口文件 │ └── index.html ├── package.json └── webpack.config.js ``` 2. **配置 webpack.config.js** 在配置文件中明确入口文件路径和开发服务器设置： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './src/main.js', // 入口文件路径 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' // 确保开发服务器能正确加载资源 }, devServer: { static: path.join(__dirname, 'src'), // 静态资源目录指向src port: 8080, hot: true }, plugins: [ new HtmlWebpackPlugin({ // 自动生成正确路径的HTML文件 template: './src/index.html' }) ] }; ``` 3. **修正 HTML 文件引用方式** 删除手动添加的 `<script>` 标签引用（如引用[4]所述错误），由 HtmlWebpackPlugin 自动注入： ```html <!-- src/index.html --> <!DOCTYPE html> <html> <body> <!-- 无需手动添加JS引用 --> </body> </html> ``` 4. **配置启动命令** 在 package.json 中添加快捷命令： ```json "scripts": { "start": "webpack serve --config webpack.config.js" } ``` 通过 `npm start` 启动开发服务器，此时会自动编译 main.js 并通过内存服务提供文件[^2][^3]。 5. **验证配置** 访问 `http://localhost:8080`，检查控制台是否正常加载 bundle.js。若出现 404 错误，检查 publicPath 是否配置为 `/`，或尝试清除浏览器缓存[^4]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值