由於正在學習的B站上的vue教學視訊中使用的webpack是舊版本，使用出現了許多問題，在此簡單記錄一下

在舊版本 webpack 中，將 index.js 檔案打包成 bundle.js 檔案使用的是如下命令（webpack 入口檔案 出口檔案）：

webpack ./src/index.js ./dist/bundle.js

結果報錯如下：

解決方法一（失敗，但還是記錄一下）：

原因是，webpack4 的打包已經不能用 webpack 輸入檔案 輸出檔案 的方式。

因此需要先建一個 package.json 檔案，方法是先在根目錄下使用命令列建立一個專案：

npm init

預設配置的話一路回車，就能在根目錄下看到 package.json 檔案了。

然後在 package.json 中 scripts 中加入以下兩行程式碼：

"dev": "webpack --mode development", //開發環境
"build": "webpack --mode production" //生產環境

然後在命令列中執行

npm run build//(或dev)

結果又報錯了：

嘗試在src目錄下手動建立了index.js檔案（空檔案），再執行以下命令之一

npm run dev  (開發環境輸出的demo.js沒有壓縮)

npm run build   (生產模式輸出的demo.js壓縮過)
 

結果——竟然成功了！

dist 目錄下出現了一個打包好的 main.js 檔案

但是！此檔案內容好像有點不對勁

解決方法二：

在網上再次進行查詢，發現其實解決辦法很簡單，只需要在輸出檔案前加上“-o"

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

然後......就成功了orz

emm還是我太傻了

不過還是有黃色警告，而且src資料夾不見了？？？而是出現了node_modules資料夾。。。原因不明，不過執行起來並沒有問題

參考：

詳解webpack4打包--新手入門（填坑）