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

当输入命令：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'，再打包就显示正常了