Webpack:Module not found: Error: Can't resolve './dist/bundle2.js' in 'F:\Workspaces\

最近學Vue有要學習webpack ,用的webpack 版本是:4.41.2版本的,在打包過程用執行了這個命令

webpack .\src\main.js  .\dist\bundle.js

1.然後就報了下邊的錯誤:

在這裏插入圖片描述
     後來查看之後原來是版本的問題,我用的這個wepack 版本過高,即3.x的wepack在新版4.x的webpack已經不支持了(怪不得視頻教學都是指定下載3.6或3.8版的webpack),所以我查官方文檔:
在這裏插入圖片描述
原來是中間加了個 -o

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

2.這樣執行就正確了,不報錯誤了,執行之後效果是這樣的

在這裏插入圖片描述

另外還有個問題就是 執行成功了,但是下邊有幾行黃色的很噁心的提示,這個怎麼解決呢?開發者還是要讀一下這幾行黃字的意思:

在這裏插入圖片描述
這段警告的意思是:

在配置警報
“模式”選項尚未設置,webpack將退回到“生產版”。將“mode”選項設置爲“development”或“production”,以便爲每個環境啓用默認設置。
您還可以將其設置爲“none”來禁用任何默認行爲。瞭解更多信息:https://webpack.js.org/configuration/mode/

意思就是你沒用配置文件打包會將生成的是生產版的代碼(即不留空格,全是一行代碼沒註釋和警告),學習所用可以用開發版(代碼有註釋和警告等)
在這裏插入圖片描述
在這裏插入圖片描述

解決方法方法:

使用配置文件打包,在項目根目錄上創建一個webpack.config.js文件,然後在該文件裏module.exports 裏設置:mode:‘development’ 這個參數,即打包成開發版就好了。

module.exports={
    mode: 'development',
}

在這裏插入圖片描述                在這裏插入圖片描述
這樣在執行命令操作就不會有黃色的文字提示了
在這裏插入圖片描述
結束了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章