Webpack-dev-server 在显示“bundle valid”信息后仍未捆绑。

Question

我已经用webpack搭建了一个基本的react应用程序，但是我无法正常运行webpack-dev-server。

我已经全局安装了webpack-dev-server并尝试了运行sudo webpack-dev-server --hot命令，因为需要热加载。

这个项目似乎在只使用webpack命令时可以正常工作。它会构建到我的构建文件夹中，并且我可以通过某个服务器使其工作，但是它无法使用webpack-dev-server。从终端来看，构建过程已经完成，没有抛出任何错误[webpack: bundle is now VALID.]，事实上，它确实正确地进行了监视，因为在任何更改时都会触发构建过程，但它并没有真正地被构建[它不会提供我的bundle.js]。我尝试更改整个配置，仍然无法解决问题。

如果有人能帮忙，将不胜感激。

以下是我的webpack.config.js文件：

var path = require('path');

module.exports = {
    devtool: '#inline-source-map"',

    watch: true,
    colors: true,
    progress: true,

    module: {
        loaders: [{
            loader: "babel",
            include: [
                path.resolve(__dirname, "src"),
            ],
            test: /\.jsx?$/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'react', 'stage-0'],
            }
        }, {
            loader: 'style!css!sass',
            include: path.join(__dirname, 'src'),
            test: /\.scss$/
        }]
    },

    plugins: [],
    output: {
        path: path.join(__dirname, 'build/js'),
        publicPath: '/build/',
        filename: '[name].js'
    },
    entry: {
        bundle: [
            './src/index.js'
        ]
    },

    devServer: {
        contentBase: "./",
        inline: true,
        port: 8080
    },
};

- Karthik Rana

Answer 1

我已经自己解决了这个问题。尽管听起来很傻，但问题出在output对象下的publicPath上。它应该与path属性匹配，而不仅仅是/build/。

output: {
    path: path.join(__dirname, 'build/js'),
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js'
},

- Karthik Rana

---

谢谢！一直有同样的问题，没有教程或文档提到这一点！干杯！ - Ash

根据我所看到的，我想补充一点，你的公共路径应该有一个尾随斜杠。当使用Andre Evangelista答案中描述的技术时，我发现webpack dev服务器正在从distmain.js而不是dist/main.js提供我的js文件。 - Chris

嘿，我很高兴这仍然能够帮助人们。 - Karthik Rana

Answer 2

对于我的情况，我需要检查Webpack正在哪里提供文件。

您可以查看： http://localhost:8080/webpack-dev-server

接下来，我可以查看我的bundle.js路径 > http://localhost:8080/dist/bundle.js

然后，我在我的index.html中使用了/dist/bundle.js：<script src="/dist/bundle.js"></script>

现在它可以刷新任何文件更改。

- Andre Evangelista

---

谢谢，这帮了很大的忙。 - webtopf

我能够理解karthik-rana的答案，因为有了这个答案。感谢@andre-evangelista。并且对这个答案点赞！ - dance2die

非常感谢！太棒了，你帮我找到了问题的所在！！ :) - Moran

这实际上解释了它（+1）。最终我改变了publicPath，就像被接受的答案建议的那样，但它不需要匹配输出路径（我的没有）。 - djomlastic

Answer 3

webpack-dev-server会将您的bundle.js文件从内存中提供服务。当您运行它时，它不会生成该文件。因此，在这种情况下，bundle.js不存在于文件中。

如果您想使用bundle.js，例如优化其大小或测试生产部署，请使用webpack命令生成它，并在生产模式下提供服务。

- takacsmark

---

嗨，谢谢回复。我知道文件不会生成这一事实。在我的情况下，它不是从内存中提供服务，也就是说，我没有在本地主机上得到更新。 - Karthik Rana

在这种情况下，请仔细检查您在HTML中的脚本标记中bundle.js的路径是否正确。 - takacsmark

是的，这是正确的，我相信这就是为什么我在执行 webpack 时能够使其工作。在我的情况下，它是 build/js/bundle.js。 - Karthik Rana

Answer 4

顺便提一下，从 Webpack v4 开始，可以将内存中的文件写入磁盘：

  devServer: {
    contentBase: "./",
    port: 8080,
    writeToDisk: true
  }

请参阅文档。

- dhilt

Answer 5

对我而言，解决这个问题的方法是：

  devServer: {
    devMiddleware: {
      writeToDisk: true,
    }
  }

https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

- Nate Gervenak

Answer 6

Dev-server将编译后的文件保存在内存中，我无法直接访问它... 但是！解决方法是您不需要访问它，在开发中（即使在节点服务器或本地主机上运行项目时），请使用localhost:8080访问您的页面，那里是webpack-dev-server提供页面服务的地方，您可以感受到使用它的所有优点（实时重新加载！），但是！它不会编译您的bundle.js，因此在生产之前，您需要手动运行webpack构建命令，就这样！dev-server没有编译您的bundle.js文件的方式！祝你好运！

- Oleksandr Grin

Answer 7

请参考这个链接 - https://github.com/webpack/webpack-dev-server/issues/24 根据该链接，webpack dev server不再写入磁盘。因此，您将无法看到构建文件。相反，它将从内存中提供服务。为了使其工作，您必须设置正确的路径。例如：在index.html中从'/dist/main.js'加载构建文件，因此在webpack配置文件中将output.publicPath设置为'/dist/'。

- Dinesh Gamage

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Ghost Ops

Answer 8

在我的情况下，我使用的是VS Code，我不得不重新启动它。我注意到vs code有时会出现错误。有时候，您对配置文件（package.json、webpack.config.js等）所做的更改不会生效。因此，如果您遇到某些设置正确但仍无法正常工作的情况，请尝试重新启动vs code。

我没有看到与此相关的任何错误报告。这很奇怪。我认为，如果您在多次构建项目之后的某个时间更改了其中一个配置文件，则会触发此错误。

如果实际上是这样发生的，那么这是一个巨大的错误。我将尝试切换到Visual Studio而不是Code，并查看是否仍然会出现此问题。如果确实如此，则可能是webpack的问题。

- Aj_