我已经使用webpack设置了一个基本的反应应用程序,但我无法正常运行webpack-dev-server
。
我已全局安装webpack-dev-server
并尝试运行命令sudo webpack-dev-server --hot
,因为需要热重新加载。
该项目似乎只用webpack
cmd正常工作。它构建到我的构建文件夹中,我可以通过某个服务器使其工作,但它不能与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
},
};
答案 0 :(得分:40)
我自己解决了这个问题。听起来很傻,但问题出在publicPath
对象下的output
。它应该与path
属性匹配,而不仅仅是/build/
,即
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
答案 1 :(得分:21)
在我的情况下,我必须检查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>
现在它会刷新任何文件更改。
答案 2 :(得分:9)
webpack-dev-server从内存中提供你的bundle.js。它在运行时不会生成文件。因此,在此方案中,bundle.js不作为文件存在。
如果您不想使用bundle.js,例如优化它的大小或测试您的生产部署,请使用webpack命令使用webpack生成它并在生产模式下提供它。
答案 3 :(得分:1)
顺便说一句,从 Webpack v4 开始,可以将内存中的资产写入磁盘:
devServer: {
contentBase: "./",
port: 8080,
writeToDisk: true
}
见doc。
答案 4 :(得分:0)
Dev-server将编译后的文件保存在内存中,我无法直接访问它... 但!解决方案是您无需访问它,在开发中(即使在节点服务器或localhost上运行项目时)也可以使用localhost:8080访问您的页面,这就是webpack-dev-server为您的页面提供服务的位置可以感受到使用它的所有优势(实时重新加载!),但是!它不会编译您的bundle.js,所以!在生产之前,您需要手动运行webpack build命令,仅此而已!开发服务器无法编译bundle.js文件!祝你好运!
答案 5 :(得分:0)
就我而言,我使用的是VS Code,因此必须重新启动它。我注意到vs代码有时会出错。您在配置文件(package.json,webpack.config.js等)中所做的更改有时不会生效。因此,如果遇到即使正确设置也无法解决问题的情况,只需重新启动vs代码即可。
我看不到与此相关的任何错误报告。所以这很奇怪。我认为如果多次构建项目后再更改配置文件之一,就会触发此错误。
如果这实际上是正在发生的事情,则它是一个巨大的错误。我将尝试切换到Visual Studio而不是Code,看看是否仍然发生。如果这样做,则可能是webpack的问题。