踩坑场景
目录结构
今天在学习 Vue 的 webpack 时(使用配置文件配置),使用 webpack 命令打包项目时,报了
ERROR in Entry module not found: Error: Can't resolve './src' in XXX
的错误。报错截图以及项目目录如下:
在百度也找了找解决方案,有说 webpack 4.0 版本后可以不需要使用配置文件来打包项目(链接:[https://www.cnblogs.com/tassel/p/12038104.html] )。当时对这个解决方案的关键信息并不敏感,使用谷歌去搜索时,在github 中找到相应的解决方案。(链接:https://github.com/webpack/webpack/issues/6858 )。如图:
翻译过来就是: 在 https://webpack.js.org/concepts/ 这个网址中写道:“自从 v4.0.0 版本开始,webpack 不再需要配置文件”。
没有配置文件,webpack 仅在存在 src/index.js 文件时才有效。这个信息(使用粗体)在文档中明确标明。
然后我回去检查我的项目结构,发现我配置文件的文件名写错了!(也太低级的错误了吧,捂脸.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'
}
}
配置完毕后如果出现
# 报错信息:执行打包后显示报错,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博客