踩坑場景

目錄結構

image.png

今天在學習 Vue 的 webpack 時（使用配置文件配置），使用 webpack 命令打包項目時，報了
ERROR in Entry module not found: Error: Can't resolve './src' in XXX的錯誤。報錯截圖以及項目目錄如下：

image.png

image.png

翻譯過來就是： 在 https://webpack.js.org/concepts/ 這個網址中寫道：“自從 v4.0.0 版本開始，webpack 不再需要配置文件”。
沒有配置文件，webpack 僅在存在 src/index.js 文件時才有效。這個信息（使用粗體）在文檔中明確標明。
然后我回去檢查我的項目結構，發(fā)現我配置文件的文件名寫錯了！（也太低級的錯誤了吧，捂臉.jpg）

官方中明確說明，如果使用配置文件使用 webpack 打包項目，則文件名是 webpack.config.js。而我根據以前配置文件命名的習慣，寫了webpack-config.js 。所以配置文件名中是 .config，而不是 -config ,修改下文件名重新打包即可。
我這里再總結一下我百度和谷歌搜到的解決方案的綜合吧！

解決方案

1.檢查 entry 配置的路徑是否出錯
2.檢查 webpack.config.js 的路徑是否出錯，webpack.config.js 必須是放在根目錄下
3.檢查配置文件文件名是否出錯，是 webpack.config.js 而不是 webpack-config.js
4.如果是 v4.0.0 以上版本的 webpack，可以不使用配置文件配置 webpack ，使用官網推薦的使用 ./src/index.js 作為入口點

PS

我的webpack.config.js配置文件

// webpack模塊化默認使用的是CommonJS
module.exports = {
  // 入口：將webpack打包命令中源文件入口路徑配置到這里
  entry: './src/main.js',
  // 出口：將webpack打包命令中輸出文件路徑配置到這里
  output: {
    path: './dist',
    filename: 'bundle.js'
  }
}

配置完畢后如果出現

# 報錯信息：執(zhí)行打包后顯示報錯，dist配置不是絕對路徑
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./dist" is not an absolute path!

需要安裝Node包，解決方法在這親測有效
P11.4-webpack配置文件webpack.config.js配置打包命令_Bruce小鬼-CSDN博客