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

打包成功！

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

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

  1. webpack4打包报错ERROR in multi ./src/main.js dist/bundle.js

    webpack打包测试: 上边将mode01.js模块及main.js主文件编写完成,下边使用webpack对这些js文件进行打包 1.进入程序目录,执行webpack main.js build.j ...

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

    webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js:https://www.jianshu.com/p/a55fb5bf75e1

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

    打包的命令格式:webpack 要打包的文件的路径  打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...

  4. 解决 webpack .\src\main.js .\dist\bundle.js 错误

    打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 栗子: webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: 错误原因 w ...

  5. 在Visual Studio Code 运行 webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development 提示 Module no t found:Error:Can't resolve' 'jquery' 是因为vs code还没安装jquery

    在Visual Studio Code 运行 webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mo ...

  6. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  7. error: js/dist/app.js from UglifyJs Unexpected token: name (Dom7)

    What you did I have installed Swiper as normal dependency in my Project and import it to my scripts ...

  8. 解决webpack vue 项目打包生成的文件，资源文件均404问题

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...

  9. 解决webpack项目中打包时候内存溢出的bug JavaScript heap out of memory

    vue 项目 npm run dev 的时候一直卡住不动:后来找到报错是 Ineffective mark-compacts near heap limit Allocation failed - J ...

随机推荐

  1. RealThinClient SDK 学习笔记（1）

    从客户端调用远程函数的两种方法 1: RtcClientModule1.Prepare('select'); // call the "select" function on th ...

  2. java深入探究12-框架之Spring

    1.引入Spring 我们在搭建框架时常常会解决问题:对象创建,对象之间依赖关系如何处理,Spring就是来解决这类问题的:控制反转依赖注入 2.环境搭建 1)下载源码:其中3.0以下版本源码中有Sp ...

  3. CSS3的transform属性

    CSS3的一些属性可能比较新,有一些书从国外翻译到国内的时间上会延缓1-2年.所以有一些东西还需要及时整理. 下面说一下CSS3的一个属性:transform 其实字面上的意思已经很明显了就是变化,变 ...

  4. 绑定当前对象例子——Tag="{Binding}"

    <TreeView Margin="10,5,0,0" HorizontalAlignment="Left"  VerticalAlignment=&qu ...

  5. get、post请求的区别

    get.post请求 自己接触前端也是许久时间了,但是对get和post请求的认识也还只是停留在网络上大多数人流传的那样: post比get安全 post可以传大数据,get传的数据量较少: 就这样, ...

  6. PCA算法详解——本质上就是投影后使得数据尽可能分散（方差最大），PCA可以被定义为数据在低维线性空间上的正交投影，这个线性空间被称为主⼦空间（principal subspace），使得投影数据的⽅差被最⼤化（Hotelling, 1933），即最大方差理论。

    PCA PCA(Principal Component Analysis,主成分分析)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量 ...

  7. 动态加载CSS，JS文件

    var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); //文件全部加 ...

  8. 打印控件Lodop

    官网:http://www.lodop.net/demo.html Lodop.C-Lodop使用说明及样例   Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又 ...

  9. LeetCode OJ：Binary Tree Right Side View（右侧视角下的二叉树）

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  10. 网络基础之网络协议篇---CS架构--网络通信--osi 协议---套接字socket--粘包

    1 C\S 客户端/服务器架构: .硬件 C/S架构 (打印机) .软件 C/S 架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务 ...