webpack 开发服务器不是在内存中生成 bundle.js 吗？答案

【问题标题】：Isn't webpack dev server generating bundle.js in memory?webpack 开发服务器不是在内存中生成 bundle.js 吗？
【发布时间】：2016-12-24 02:28:08
【问题描述】：

我的文件结构如下：

Project
 |
 +-- src/
 |   |
 |   +-- index.js
 |
 +-- index.html
 |
 +-- webpack.config.js

src/index.js:

document.write("Hello World.");

index.html:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack learning</title>

    <script src="builds/bundle.js"></script>
</head>
<body>

</body>
</html>

webpack.config.js：

var path = require('path');

module.exports = {
  entry: './src',
  output: {
    path: path.join(__dirname, 'builds'),
    filename: 'bundle.js',
  }
};

当我在项目目录中运行 webpack-dev-server 时，webpack-dev-server 正常启动并打印“webpack: bundle now VALID”。但是，当我启动浏览器并转到 localhost:8080 时，控制台会抱怨找不到 bundle.js。实际上，没有这样的名为“build”的文件夹，其中包含 bundle.js。但是，webpack-dev-server 不是在内存中生成 bundle.js 吗？是否涉及任何配置问题？

【问题讨论】：

标签： javascript web webpack frontend webpack-dev-server

【解决方案1】：

查看您正在运行的命令会有所帮助，但是如果我不得不猜测这个命令，我会说您可能没有设置 --content-base https://webpack.js.org/configuration/dev-server/#devserver-contentbase

【讨论】：

显式声明output.publicPath也很有用。
当我添加 output.publicPath 并将其设置为“builds”时，一切正常。似乎当 webpack-dev-server 在内存中生成 bundle.js 时，它将该文件放在 output.publicPath 指定的目录中，而忽略了“output.path”设置的目录。因为无论 output.path 设置为什么，只要 output.publicPath 保持“构建”状态，控制台中就不会出现错误，并且浏览器会呈现“Hello World”。