我已经设置了一个基本的React应用程序与webpack，但我不能得到的webpack-dev-server运行正常。
我已经全局安装了webpack-dev-server，并尝试运行命令sudo webpack-dev-server --hot，因为需要热重新加载。
这个项目看起来只需要webpack命令就可以很好地工作。它构建到我的build文件夹中，我可以通过一些服务器让它工作，但它不能与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
},
};
8条答案
按热度按时间czq61nw11#
我已经自己解决了这个问题。虽然听起来很傻，但问题出在
output对象下的publicPath上。它应该匹配path属性，而不仅仅是/build/，即，m528fe3b2#
在我的情况下，我不得不检查webpack在哪里提供文件。
你可以看到：
http://localhost:8080/webpack-dev-server然后我可以看到我的bundle.js路径〉http://localhost:8080/dist/bundle.js
之后，我在index.html
<script src="/dist/bundle.js"></script>中使用了该/dist/bundle.js现在，它将刷新所有文件更改。
zpf6vheq3#
webpack-dev-server从内存中为bundle.js提供服务。当您运行它时，它不会生成文件。因此，bundle.js在此场景中不作为文件出现。
如果您不想使用bundle.js（例如，为了优化它的大小或测试您的生产部署），请使用webpack命令通过webpack生成它，并在生产模式下提供它。
pu3pd22g4#
顺便说一下，从Webpack v4开始，可以将内存中的资产写入磁盘：
请参见文档
tvokkenx5#
Dev-server将编译后的文件保存在内存中，我无法直接访问它......但是！解决方案是，你不需要访问它，在开发中（即使你在节点服务器或本地主机上运行项目）使用localhost：8080来访问你的页面，这就是webpack-dev-server为你的页面提供服务的地方，你可以感受到使用它的所有好处（实时重载！），但是！它不会编译你的bundle.js，所以！在生产之前，你需要手动运行webpack build命令，仅此而已！dev-server没有办法编译你的bundle.js文件！祝你好运！
avwztpqn6#
请参考-https://github.com/webpack/webpack-dev-server/issues/24根据这个，webpack dev服务器不再写入磁盘。因此，您将无法看到构建文件。相反，它将从内存中提供。要使它工作，您必须设置正确的路径。示例：在index.html中，从“/dist/main.js”加载构建文件，因此在webpack配置文件中将output.publicPath设置为“/dist/”
mrphzbgm7#
对我来说，解决这个问题的方法是：
https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
30byixjq8#
在我的例子中，我使用的是VS代码，我不得不重新启动它。我注意到VS代码有时会出错。你在配置文件（package.json，webpack.config.js等）中所做的更改有时不会生效。所以，如果你遇到即使使用正确的设置也无法工作的情况，只需重新启动VS代码。
我没有看到任何与此相关的bug报告。所以这很奇怪。我想如果你在多次构建项目后的某个时间更改了其中一个配置文件，就会触发此bug。
如果这是真的发生了什么，那么这是一个巨大的错误。我会尝试切换到Visual Studio，而不是代码，看看是否仍然发生这种情况。如果它仍然发生，那么它可能是一个问题，与webpack。