webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js

最新推荐文章于 2022-09-07 20:59:06 发布
转载 最新推荐文章于 2022-09-07 20:59:06 发布 · 6.6k 阅读 · 1

当输入命令：webpack .\src\main.js .\dist\bundle.js

报错如下：

来自本地

这是为什么呢？原因是我的webpack版本过高，原来的命令已经不适用了

如下查询版本号：

来自本地

那应该如何解决?

更换打包命令为: webpack ./src/main.js -o ./dist/bundle.js

其中 bundle.js是打包后生成的文件的文件名

来自本地

可以看到main.js已经被打包为了bundle.js文件，但是，这个并没有打包成功！

 因为打包的时候没有出现红色的error了，但是还有黄色的警告，如下图.

来自本地

黄色警告:是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态

可以看到末尾并没有生成我们所打包的main.js的信息

黄色部分的警告的意思是，没有设置模式,有开发模式和生产模式两种，

接下来，找到package.json.添加上”dev”和”build”这两个信息以及他们的值：

  “scripts”: {

    “test”: “echo \”Error: no test specified\” && exit 1”,

   "dev":"webpack --mode development",

    "bulid":"webapck --mode production"

  },

再全局安装 webpack-cli：

npm i --save-dev webpack-cli -g

安装完成后, 输入命令  npm run dev

来自本地

但是结果还是有很多报错，

原因是，你输入命令 npm run dev 的时候，会默认打包src文件夹下的index.js文件，打包完成后是main.js文件(放在dist)，你有没有发现我们一开始安装webpack的时候并没有这个文件生成，所以更别提什么index.js文件了，所以这些我们需要手动创建

我们先创建src文件，还有一个dist文件，存放默认的打包生成的文件, 然后在src里再创建index.js文件

重新输入命令：npm run dev ，如下图，dist文件夹里会自动生成一个mian.js文件，并且无任何警告或报错出现，说明我们的问题已经解决了

npm run dev后无报错

看项目

在看main.js尾部，也把index.js的代码放进去了

main.js尾部代码

到了这一步，打包main.js(不是默认的文件的时候),，黄色警告还是出现!那么应该怎么解决呢？那就是webpack的版本问题，命令不同了

应该使用如下命令进行打包：

webpack ./src/main.js -o ./dist/bundle.js --mode development

来自本地

很神奇吧? 黄色警告没有了

查看打包后的bundle.js文件，末尾也出现了main.js代码了

来自本地

 

注意：运行npm run dev后，index.js打包正常，但是自己手动创建的main.js打包后虽然出现bundle.js，但还是会报黄色警告：The 'mode' option has not been set, webpack will fallback to 'production' for this value.....，解决此问题，只需新建一个webpack.config.js，在module.exports配置对象里加上mode: 'development'，再打包就显示正常了


https://www.jianshu.com/p/a55fb5bf75e1

webpack打包报错：ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can't resolve '.\
weixin_43389331的博客
08-14 5517
刚接触webpack，完美的安装最新版本和cli后，第一个打包就除了问题，可谓是把我自己气到。两个错误： ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can’t resolve ‘.\dist\bundle.js’ in ‘F:\others\XAMPP\htdocs\vue\webpack-stud...
运行弹窗项目时，重新安装了cnpm i node-sass -D，也会出现同样的错误，有说是版本的问题，但修改后同样也会是同样的错误
weixin_40945354的博客
02-20 2118
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
./src/main.js in multi (webpack)-dev-server/client?http://10.104.208.197:8081/sockjs-node...
热门推荐
zsy_1991的博客
12-23 5万+
前情 想要看@vue/cli创建的项目和普通npm install 的项目区别，故将@vue/cli 创建的项目除了App.vue,main.js和package.json三个文件之外的其他文件删除，该三个文件在同一个目录下。然后使用npm install安装依赖，然后使用npm run serve命令启动本地开发环境，报如下错误： $ npm run serve vue-cli-service ...
vue运行报错 ./src/main.js in multi (webpack)-dev-server/client?...
qq_52971866的博客
09-07 1万+
这里entry的正确路径是根据当前项目路径来写的，我这边的路径是："examples/main.js"，不是"src/main.js"这是vue.config下的webpack的路径错了。
ERROR in multi ./src/main.js dist/bundle.js
我的博客
08-25 1797
原命令 webpack .\src\main.js .\dist\bundle.js 报错 ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can’t resolve ‘.\dist\bundle.js’ in ‘C:\Users\Tecna1205\Desktop\vue\webpack-study’ ...
关于使用Webpack时报出：ERROR IN MULTI ./src/main.js .dist/bundle.js 错误的分享
YQ2254的博客
06-07 949
关于Vue使用webpack时出现的“ERROR IN MULTI ./src/main.js .dist/bundle.js Module nor found:Error:Can’t resolve”的问题 本人也是才开始学习Vue不久，刚刚踏入一个新的领域多多少少会遇到一些问题的，现在就分享出来别面大家以后在学习的过程中少踩一些坑。 当使用webpack .\src\main.js .dist\bundle.js的时候报出以下错误： 首先在终端检查一下自己的webpack的版本 webpack .
ERROR Failed to compile with 1 error 16:36:38 This relative module was not found: * ./src/main.js in multi (webpack)-dev-server/client?http://192.168.143.63:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js 什么问题
05-29
嗯，用户遇到了Webpack编译错误，提示找不到相对模块./src/main.js。首先，我需要根据用户提供的引用信息来分析可能的原因。用户提到在配置文件中可能有路径问题，比如package.json中的scripts是否正确设置了入口...
Failed to compile. multi (webpack)-dev-server/client?http://localhost:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js Module not found: Error: Can't resolve './src/main.js' in 'E:\bise\javabise\基于springboot vue电影管理系统\1891springboot v
06-27
默认情况下，webpack会查找'./src/index.js'，但我们的错误是找不到'./src/main.js'，所以可能是配置中指定了入口为'./src/main.js'，但该文件不存在。2.确认文件存在：确保项目根目录下的src文件夹中确实存在main....
根据配置报错PS D:\QD\vue-cli\ketepai> npm run dev > ketepai@1.0.0 dev > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js (node:31036) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated. (Use `node --trace-deprecation ...` to show where the warning was created) (node:31036) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated. 10% building modules 1/1 modules 0 active Project is running at http://localhost:8080/ webpack output is served from / 95% emitting ERROR Failed to compile with 1 errors 11:03:47 This relative module was not found: * ./src/index.js in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js Hash: bf5afe77233399ef319a Version: webpack 3.12.0 Time: 250ms Asset Size Chunks Chunk Names bundle.js 424 kB 0 [emitted] [big] main [17] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built t] [18] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built] [19] ./node_modules/url/url.js 23.5 kB {0} [built] [20] ./node_modules/punycode/punycode.js 14.7 kB {0} [built] [22] ./node_modules/qs/lib/index.js 211 bytes {0} [built] [53] ./node_modules/strip-ansi/index.js 161 bytes {0} [built] [54] ./node_modules/ansi-regex/index.js 135 bytes {0} [built] [55] ./node_modules/loglevel/lib/loglevel.js 11.3 kB {0} [built] [56] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built] [57] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built] [58] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built] [59] ./node_modules/ansi-html/index.js 4.26 kB {0} [built] [68] (webpack)/hot/dev-server.js 1.61 kB {0} [built] + 54 hidden modules ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js Module not found: Error: Can't resolve './src/index.js' in 'D:\QD\vue-cli\ketepai' @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js webpack: Failed to compile.
最新发布
08-11
`ERROR in multi ./src/main.js ./dist/bundle.js` 这个错误是因为在Webpack的entry中配置了多个入口，但是其中一个入口文件`./dist/bundle.js`不存在。这通常是由于配置错误，可能是在开发环境中错误地引用了...
Module not found: Error: Can't resolve "xxx" in "xxx"
weixin_30312557的博客
06-01 1633
报错信息 ERROR in multi ./src/index.js ./dist/bundle.js Module not found: Error: Can't resolve './dist/bundle.js' in 'C:\Users\ASUS\Desktop\vue\webpack-study' @ multi ./src/index.js ./dist/bundle.js...
webpack打包报错：ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can‘t resolve ‘.\
wgf1997的博客
09-12 973
刚刚接触webpack就遇到好几个问题，成功安装最新版webpack和cli后，第一个打包就出现了问题，其实也算是语法错误 当运行webpack .\src\main.js .\dist\bundle.js打包时，出现如下错误： 产生错误原因： 最新版本的webpack命令有所改变 解决方法： 在以前的命令里加个-o就可以啦 运行webpack .\src\main.js -o .\dist\bundle.js ...
[webpack]webpack打包文件出现 ERROR in multi ./src/main.js ./dist/bundle.js 错误的解决
m0_46470372的博客
03-09 1245
[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...
学习Vue bug 一、webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
冯安晨
04-16 2341
一、先上错误代码 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...
vue运行报错 ./src/main.js in multi (webpack)-dev-server/client?...（霸霸看了都说好）
霸霸的博客
08-13 2万+
报错内容如下图： ERROR Failed to compile with 1 error 9:49:18 This relative module was not found: ./src/m
报错： error in ./src/main.js
ALDNOAH_K的博客
06-29 4547
一、首先检查main.js中文件路径是否引入错误二、若无误，参照下面方法1.vs快捷键 ctrl+p 搜索文件 eslintrc.js2.将文件中rules用下面的代码替换 3.再次搜索文件 editorconfig ，将insert_final_newline改为 false 4.文件保存，重启vs...
解决webpack因新版本打包失败问题--ERROR in multi ./src/main.js ./dist/bundle.js
非完美主义的博客
05-01 3798
最近在学习webpack打包过程中遇到的一个问题向大家分享下！ 创建了一个webpacksty的目录，目录下放着dist，src子目录，然后通过node环境下，npm init -y 初始化项目出现package.json文件，src子目录下又存放着index.html和main.js文件，接下来尝试着在main.js输入一句代码当验证打包后续是否成功的过程： console.log("ok...
webpack 安装和使用webpack ./src/main.js ./dist/bundle.js错误解决方案
qq_45192089的博客
04-04 2157
注意：一定要注意文件路径！ （1）全局安装后，应该都是最新版的，搜索之后说是新版本的指令有所不同 npm install webpack -g npm install webpack-cil -g （2）然后输入上面这句进行打包 webpack ./src/main.js -o ./dist/bundle.js （3）webpack.config.js（下面是我配置文件） const path = require('path') module.exports = { entry: path.joi
为什么终端运行不了webpack./src/index.js build.js
03-15
### 终端无法通过 Webpack 将 `src/index.js` 构建到 `build.js` 的解决方案 当遇到终端无法运行 Webpack 并将 `src/index.js` 文件打包成目标文件时，可能涉及多个方面的原因。以下是可能导致此问题的因素以及对应的解决方法： #### 1. 配置文件错误 Webpack 使用配置文件来定义入口点和输出文件的位置。如果未正确定义这些参数，则可能会导致构建失败。 - **入口点设置不正确**: 如果在 Webpack 配置文件中未指定正确的入口点路径（即 `entry` 字段），则会引发错误。通常情况下，入口点应指向应用程序的主要初始化脚本[^3]。 ```javascript module.exports = { entry: './src/index.js', // 正确的入口点 output: { filename: 'bundle.js', path: __dirname + '/dist' } }; ``` - **出口目录不存在或权限不足**: 输出目录 (`output.path`) 必须存在并具有写入权限。如果没有创建该目录或者没有足够的权限，也会报错。 #### 2. 模块解析问题 有时模块依赖关系未能被正确解析，这可能是由于缺少必要的加载器 (loader) 或者安装了冲突版本的依赖项所致。 - **Loader 缺失**: 对于非 JavaScript 资源（如 CSS、图片等），需要相应的 loader 来处理它们。例如，对于 `.css` 文件，可以使用 `style-loader` 和 `css-loader` 进行转换[^1]。 ```bash npm install --save-dev style-loader css-loader ``` 更新 Webpack 配置如下： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } // 添加样式支持 ] } }; ``` #### 3. 版本兼容性问题 不同版本之间的 API 变化也可能引起构建过程中的异常行为。因此建议始终查看官方文档确认当前使用的插件是否匹配所选 Webpack 主体版本的要求。 - **检查 Node.js/Node_modules 是否最新**: 确保本地环境下的 nodejs 是最新的稳定版，并清理旧缓存重新下载所需库以排除潜在干扰因素[^2]。 ```bash rm -rf node_modules package-lock.json && npm cache clean --force && npm i ``` --- ### 总结 以上列举了几种常见的原因及其对应措施帮助排查为何命令行工具无法成功执行 Webpack 命令完成项目资源编译工作流的情况。具体实施还需依据实际场景调整细节部分设定值直至恢复正常运作状态为止。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值