Javascript 即使在显示捆绑包有效消息后，Web包开发服务器也未捆绑

我已经用webpack设置了一个基本的react应用程序，但是我无法使

webpack开发服务器

正常运行

我已经全局安装了

webpack dev server

，并尝试运行命令

sudo webpack dev server--hot

，因为需要热重新加载

该项目似乎在使用

webpack

cmd时运行良好。它构建到我的构建文件夹中，我可以通过一些服务器让它工作，但它不能与

webpack dev server

一起工作。从终端可以清楚地看到，构建过程已经完成，没有抛出任何错误[

webpack:bundle现在有效。

]，而且它实际上正在正确地观察，因为任何更改都会触发构建过程，但它并没有真正被构建[它不服务于我的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
    },
};

---

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

---

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

我自己解决了这个问题。听起来很傻，但问题在于

输出

对象下的

publicPath

。它应该匹配

路径

属性，而不仅仅是

/build/

，即

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

---

在我的情况下，我必须检查网页在哪里提供文件

你可以看到：

http://localhost:8080/webpack-开发服务器

然后我可以看到我的bundle.js路径>

之后，我在index.html中使用了

/dist/bundle.js

---

现在，它刷新任何文件更改

Dev server将编译后的文件保存在内存中，我无法直接访问它。。。

---

但是解决方案是，您无需访问它，在开发过程中（即使您在节点服务器或本地主机上运行项目），使用localhost:8080访问您的页面，这就是webpack dev server为您的页面提供服务的地方，您可以感受到使用它的所有好处（实时重新加载！），但是！它不会编译bundle.js，所以！在生产之前，您需要手动运行webpack build命令，就这样！dev server无法编译bundle.js文件！祝你好运

在我的例子中，我使用的是VS代码，我必须重新启动它。我注意到vs代码有时会出错。您在配置文件（package.json、webpack.config.js等）中所做的更改有时不会生效。所以，如果您遇到即使使用正确的设置也无法工作的情况，只需重新启动vs代码

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

---

如果这真的发生了，那就是一个巨大的错误。我将尝试切换到VisualStudio而不是代码，看看这种情况是否仍然发生。如果是这样，则可能是webpack的问题。

顺便说一句，从webpack v4开始，可以将内存中的资产写入磁盘：

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

---

请参阅。

Hi。。谢谢你的回复。。我知道这个文件不会被生成。在我的情况下，它不是从内存中提供的，也就是说，我没有在本地主机上获得更新。在这种情况下，请仔细检查html中脚本标记中bundle.js的路径是否正确。是的，它是正确的，我相信这就是为什么我在执行

webpack

的同时让它工作的原因。在我的例子中，它是

build/js/bundle.js

谢谢！一直有相同的问题，没有图坦卡蒙或医生提到这一点！干杯根据我所看到的，我可能会补充一点，您的公共路径应该有一个尾随斜杠。当使用Andre Evangelista的回答中描述的技术时，我可以看到webpack dev server是从

distmain.js

而不是

dist/main.js

为我的js文件提供服务的。谢谢这很有效，broAy，我很高兴这仍然在帮助人们。谢谢，这帮了我很大的忙，因为有了这个答案，我才找到了karthik rana的答案。谢谢@andre evangelista。答案是+1！谢谢！！太好了，你帮我找到了问题！！：）这实际上解释了（+1）。我最终按照公认的答案更改了publicPath，但它不需要匹配输出路径（我的不需要）。