webpack-serve无法提供bundle文件服务（报404错误）求助

首先看你的配置，几个关键点可能导致了404错误，咱们一步步理清楚：

核心问题：publicPath与服务器路径不匹配 #

webpack在开发模式下（比如用webpack-serve），bundle文件是存在内存里的，不是真的写入dist目录。你的配置里：

• output.publicPath: '/dist/' 告诉webpack把内存里的bundle放在/dist/路径下，也就是访问地址应该是http://localhost:xxxx/dist/bundle.js
• 但devServer.contentBase: path.join(__dirname, "dist") 设置服务器的根目录为本地的dist文件夹，这时候如果你的HTML文件在dist里，引用的是<script src="bundle.js"></script>，浏览器会去http://localhost:xxxx/bundle.js找，自然找不到内存里的/dist/bundle.js，就会404。

解决方案（二选一即可） #

方案1：调整publicPath为根路径 #

把output.publicPath改成'/'，这样内存里的bundle就会放在服务器根目录，HTML里直接引用<script src="bundle.js"></script>就能访问到：

output: {
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/', // 修改这里
  filename: 'bundle.js'
},

方案2：保持publicPath，修改HTML引用路径并同步devServer配置 #

如果一定要保留publicPath: '/dist/'，那需要：

1. 在你的HTML文件里把bundle的引用改成<script src="/dist/bundle.js"></script>
2. 给devServer加上publicPath配置，确保和output的publicPath一致：

devServer: {
  contentBase: path.join(__dirname, "dist"),
  historyApiFallback: true,
  publicPath: '/dist/' // 新增这一行
},

额外的配置小问题 #

你的vue-loader规则没写完，应该补全成：

{ test: /\.vue$/, use: 'vue-loader' }

而且已经正确引入了VueLoaderPlugin，记得在配置里加上plugins数组（你目前的配置里没看到这部分，会导致vue-loader无法正常工作）：

plugins: [
  new VueLoaderPlugin()
],

这样调整后，webpack-serve应该就能正确提供bundle文件了，不会再出现404。

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