當(dāng)輸入命令：webpack .\src\main.js .\dist\bundle.js
報(bào)錯(cuò)如下：
這是為什么呢？原因是我的webpack版本過高，原來的命令已經(jīng)不適用了
如下查詢版本號(hào)：
那應(yīng)該如何解決?
更換打包命令為: webpack ./src/main.js -o ./dist/bundle.js
其中 bundle.js是打包后生成的文件的文件名
可以看到main.js已經(jīng)被打包為了bundle.js文件，但是，這個(gè)并沒有打包成功！
?因?yàn)榇虬臅r(shí)候沒有出現(xiàn)紅色的error了，但是還有黃色的警告，如下圖.
黃色警告:是因?yàn)閣ebpack4引入了模式,有開發(fā)模式,生產(chǎn)模式,無這三個(gè)狀態(tài)
可以看到末尾并沒有生成我們所打包的main.js的信息
黃色部分的警告的意思是，沒有設(shè)置模式,有開發(fā)模式和生產(chǎn)模式兩種，
接下來，找到package.json.添加上”dev”和”build”這兩個(gè)信息以及他們的值：
? “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
但是結(jié)果還是有很多報(bào)錯(cuò)，
原因是，你輸入命令 npm run dev 的時(shí)候，會(huì)默認(rèn)打包src文件夾下的index.js文件，打包完成后是main.js文件(放在dist)，你有沒有發(fā)現(xiàn)我們一開始安裝webpack的時(shí)候并沒有這個(gè)文件生成，所以更別提什么index.js文件了，所以這些我們需要手動(dòng)創(chuàng)建
我們先創(chuàng)建src文件，還有一個(gè)dist文件，存放默認(rèn)的打包生成的文件, 然后在src里再創(chuàng)建index.js文件
重新輸入命令：npm run dev ，如下圖，dist文件夾里會(huì)自動(dòng)生成一個(gè)mian.js文件，并且無任何警告或報(bào)錯(cuò)出現(xiàn)，說明我們的問題已經(jīng)解決了
在看main.js尾部，也把index.js的代碼放進(jìn)去了
到了這一步，打包main.js(不是默認(rèn)的文件的時(shí)候),，黃色警告還是出現(xiàn)!那么應(yīng)該怎么解決呢？那就是webpack的版本問題，命令不同了
應(yīng)該使用如下命令進(jìn)行打包：
webpack ./src/main.js -o ./dist/bundle.js --mode development
很神奇吧? 黃色警告沒有了
查看打包后的bundle.js文件，末尾也出現(xiàn)了main.js代碼了
注意：運(yùn)行npm run dev后，index.js打包正常，但是自己手動(dòng)創(chuàng)建的main.js打包后雖然出現(xiàn)bundle.js，但還是會(huì)報(bào)黃色警告：The 'mode' option has not been set, webpack will fallback to 'production' for this value.....，解決此問題，只需新建一個(gè)webpack.config.js，在module.exports配置對(duì)象里加上mode: 'development'，再打包就顯示正常了
