Webpack打包报错：无法解析dist/app.bundle.js，求解决办法

嘿，我一眼就看出问题所在了——你用错了Webpack CLI的命令格式！

错误原因 #

你当前执行的命令：

node_modules/.bin/webpack-cli src/app.js dist/app.bundle.js

Webpack会把空格分隔的第二个参数dist/app.bundle.js当成第二个入口文件来解析，但这个文件还没生成呢，自然会提示找不到它。另外命令里没指定mode参数，这就是你看到警告的原因。

解决方案 #

这里给你两种可行的解决方式：

方式1：修正命令格式，直接指定输出路径

在命令里用--output（或简写-o）参数来指定打包后的输出文件，同时加上mode参数消除警告：

# 完整写法
node_modules/.bin/webpack-cli src/app.js --output dist/app.bundle.js --mode development

# 简写版本
node_modules/.bin/webpack-cli src/app.js -o dist/app.bundle.js --mode development

mode可以选development（开发模式，代码不压缩）或production（生产模式，代码自动压缩），根据你的需求选择就行。

方式2：使用Webpack配置文件（更推荐，适合长期项目）

创建一个webpack.config.js文件放在项目根目录，内容如下：

module.exports = {
  // 指定模式，消除警告
  mode: 'development',
  // 入口文件路径
  entry: './src/app.js',
  // 输出配置
  output: {
    // 输出文件名
    filename: 'app.bundle.js',
    // 输出目录（__dirname代表当前文件所在目录）
    path: __dirname + '/dist'
  }
};

之后你只需要执行简化的命令就能打包：

node_modules/.bin/webpack-cli

更方便的是，你可以在package.json的scripts里添加打包命令：

"scripts": {
  "build": "webpack-cli --mode development"
}

之后直接用npm run build就能完成打包啦！

这样修改后，你就能正常打包，同时警告和错误都会消失～

内容的提问来源于stack exchange，提问作者sof-03