>我已经用 webpack 设置了一个基本的 react 应用程序,但我无法让webpack-dev-server
正常运行。
我已经全局安装了webpack-dev-server
并尝试运行命令sudo webpack-dev-server --hot
因为需要热重载。
该项目似乎只需 webpack
cmd 即可正常工作。它内置到我的构建文件夹中,我可以通过某些服务器让它工作,但它不适用于webpack-dev-server
.从终端来看,很明显构建过程已经完成,没有抛出任何错误 [ webpack: bundle is now VALID.
],并且它实际上可以正确观看,因为在任何更改中它都会触发构建过程,但它并没有真正被构建 [它不为我的捆绑包提供服务.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
},
};
我已经自己解决了这个问题。听起来很愚蠢,但问题出在output
对象下的publicPath
上。它应该匹配path
属性,而不仅仅是/build/
,即
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
就我而言,我必须检查 webpack 在哪里提供文件。
你可以看到它: http://localhost:8080/webpack-dev-server
然后我可以看到我的捆绑.js路径> http://localhost:8080/dist/bundle.js
之后,我在索引中使用了该/dist/bundle.js
.html <script src="/dist/bundle.js"></script>
现在它会刷新任何文件更改。
webpack-dev-server 从内存中提供您的捆绑包.js。运行时它不会生成文件。因此,在这种情况下,捆绑.js不作为文件存在。
如果您不想使用 bundle.js,例如为了优化其大小或测试您的生产部署,请使用 webpack 命令使用 webpack 生成它,并在生产模式下提供它。
顺便说一下,从 Webpack v4 开始,可以将内存中的资产写入磁盘:
devServer: {
contentBase: "./",
port: 8080,
writeToDisk: true
}
请参阅文档。
对我来说,解决这个问题的是:
devServer: {
devMiddleware: {
writeToDisk: true,
}
}
https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
开发服务器将编译的文件保存在内存中,我无法直接访问它......但!解决方案是你不需要访问它,在开发中(即使你在节点服务器或本地主机上运行你的项目)使用 localhost:8080 来访问你的页面,这就是 webpack-dev-server 为你页面提供服务的地方,你可以感受到使用它的所有优势(实时重新加载!),但是!它不会编译您的捆绑包.js,所以!在生产之前,您需要手动运行 webpack 构建命令,仅此而已!开发服务器无法编译您的捆绑.js文件!祝你好运!
请参考这个 - https://github.com/webpack/webpack-dev-server/issues/24据此,webpack 开发服务器不再写入磁盘。因此,您将无法看到构建文件。相反,它将从内存中提供。要使其正常工作,您必须设置正确的路径。示例:在索引中.html从 '/dist/main.js' 加载构建文件,因此在 webpack 配置文件中将 output.publicPath 设置为 '/dist/'
就我而言,我使用的是VS Code,我必须重新启动它。我注意到 vs 代码有时会出错。您在配置文件(package.json,webpack.config.js等)中所做的更改有时不会生效。因此,如果您遇到即使使用正确的设置也无法正常工作的情况,只需重新启动 vs 代码即可。
我看不到与此相关的任何错误报告。所以这很奇怪。我认为如果您在多次构建项目后一段时间更改其中一个配置文件,则会触发此错误。
如果这真的是正在发生的事情,那么这是一个巨大的错误。我将尝试切换到Visual Studio而不是Code,看看是否仍然发生这种情况。如果是这样,那么可能是 webpack 的问题。