Webpack打包报错：无法解析bundle.js文件求助

老哥，我太懂你这种在基础步骤卡壳的烦躁了！你遇到的问题其实是Webpack版本更新带来的命令语法变化——从Webpack 4开始，原来那种webpack app.js bundle.js的老写法已经不生效了，现在这个命令会把bundle.js当成要打包的入口文件来找，自然就找不到啦！

下面给你几种靠谱的解决办法：

方法一：用命令行参数直接指定输出（快速测试用） #

直接在命令里明确指定输出文件和mode（Webpack4+要求必须指定mode，否则会有警告）：

webpack app.js --output bundle.js --mode development

或者用缩写简化命令：

webpack app.js -o bundle.js --mode development

development是开发环境模式，打包速度快、带源码映射方便调试；如果要生产环境打包，把development换成production即可，会自动压缩优化代码。

方法二：配置webpack.config.js（推荐长期项目使用） #

创建配置文件是更规范的做法，后续扩展loader、插件等功能也更方便：

1. 在项目根目录新建webpack.config.js文件，写入以下内容：

module.exports = {
  // 指定打包入口文件
  entry: './app.js',
  // 指定输出配置
  output: {
    filename: 'bundle.js'
  },
  // 指定环境模式
  mode: 'development'
};

2. 之后直接在命令行运行：

webpack

就能自动按照配置文件的规则完成打包啦！

方法三：在package.json里添加脚本（日常开发更便捷） #

为了避免每次敲长命令，可以在package.json的scripts字段里添加打包脚本：

{
  "name": "webpack-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  // 其他原有字段...
}

之后只需要运行：

• 开发环境打包：npm run dev
• 生产环境打包：npm run build

额外提示：确保本地安装了正确的依赖 #

如果之前装的是全局Webpack，可能会有版本兼容问题，建议改成本地项目依赖：

1. 先卸载全局的Webpack和CLI工具：

npm uninstall -g webpack webpack-cli

2. 安装本地开发依赖：

npm install --save-dev webpack webpack-cli

这样项目用的就是本地安装的Webpack版本，能有效避免全局版本冲突问题。

内容的提问来源于stack exchange，提问作者Jonathan Kuhl