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

最近在学习webpack打包过程中遇到的一个问题向大家分享下！

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

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导入这个生成的文件，运行在浏览器查看

打包成功！

有人会问，解决办法的博客这么多，你为什么不在出问题的时候看别人的博客解决问题或者是转载别人的，但是我自己坚持只有你真正动手了才会印象更深刻，开发这条路容不得偷懒，想要不被这个时时刻刻都在技术变更的时代不被淘汰，那就努力吧！一个小小的问题别嫌它小，小也有小的解决办法！加油！

原文地址：https://www.cnblogs.com/chengcunjing/p/10799532.html

时间： 2024-10-12 13:25:45

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

webpack运行webpack .\src\main.js .\dist\bundle.js打包出错

打包的命令格式:webpack 要打包的未年检的路径  打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'pro

解决Eclipse建立Maven Web项目后找不到src/main/java资源文件夹的办法

问题如题,明细见下图: 解决方法: 在项目上右键选择properties,然后点击java build path,在Librarys下,编辑JRE System Library,选择workspace default jre就可以了.

解决 webpack 打包文件体积过大

webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了

解决webpack打包速度慢的解决办法

技巧1 webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的.在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用.其实这是错误的使用方式. 正确的方式应直接执行webpack --watch 这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好多,打包时间相差几倍. 技巧2 webpack配合的React,jQuery一些共有的库去使用,虽然没写几行代码

webpack 4.34 打包命令

webpack src/index.js -o dist/bundle.js 文档结构 dist src-      -index.js   原文地址:https://www.cnblogs.com/xiannv/p/11015829.html

webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.toutiao.com/i6612879647568822788/ 我这里可以在回顾一下这个web pack的hello world项目. 用webpack打包之后,项目文件夹里包含了这些资源: index.html的源代码很简单,就包含了一个webpack打包后生成的bundle.js文件: 那么运行

webpack 的sass-loader打包出错问题，提示 Module not found: Error: Can't resolve '*.css' 的问题

问题很简单,因为sass/scss文件中引用了css文件,而sass-loader将这个css文件识别为一个模块. 解决办法有两个: 1. 将引用路径由相对引用改为绝对引用:如./style.css改为 /src/css/style/css: 2. 将css文件改写为sass/scss文件,即不引用css转而将样式写在sass/scss文件中引入. webpack 的sass-loader打包出错问题,提示 Module not found: Error: Can't resolve '*.cs

彻底解决Webpack打包慢的问题

转载 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析 我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader).下面是我们的

解决打包软链接打包失败问题

一般情况下打包文件时,如果直接打包软连接会导致打包失败,即没有将要打包的内容打包进去,这里提供tar打包参数-h [[email protected] ~]# ll /etc/rc.local lrwxrwxrwx. 1 root root 13 Nov 24 00:45 /etc/rc.local -> rc.d/rc.local [[email protected] ~]# tar czf tar.gz /etc/rc.local tar: Removing leading `/' from