Javascript 即使在显示捆绑有效消息后，Webpack-dev-server 也不捆绑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36150456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack-dev-server not bundling even after showing bundle valid message
提问by Karthik Rana
I've set up a basic react application with webpack but I couldn't get the webpack-dev-serverrunning properly.
我已经使用 webpack 设置了一个基本的 React 应用程序，但无法webpack-dev-server正常运行。
I've installed webpack-dev-serverglobally and tried running the command sudo webpack-dev-server --hotas hot reloading was required.
我已经webpack-dev-server全局安装并尝试运行命令，sudo webpack-dev-server --hot因为需要热重新加载。
The project seems to be working fine with just webpackcmd. It builds into my build folder and I can get it working via some server but it wont work with webpack-dev-server. From terminal its clear that the build process has completed with no error being thrown [webpack: bundle is now VALID.] and its in fact watching properly because on any change it does trigger the build process but it doesn't really gets built [it doesn't serve my bundle.js]. I tried changing the entire config and still couldn't get the issue resolved.
该项目似乎仅使用webpackcmd就可以正常工作。它内置到我的构建文件夹中，我可以通过某些服务器使其工作，但它无法与webpack-dev-server. 从终端可以清楚地看出构建过程已经完成，没有抛出错误 [ webpack: bundle is now VALID.] 并且它实际上正在正确观察，因为在任何更改时它都会触发构建过程，但它并没有真正被构建 [它不为我的包提供服务。 js]。我尝试更改整个配置，但仍然无法解决问题。
It would be much appreciated if someone can help.
如果有人可以提供帮助，我们将不胜感激。
Following is my webpack.config.js file.
以下是我的 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
},
};
回答by Karthik Rana
I've got the issue resolved by myself. Silly as it sounds but the issue was with the publicPathunder the outputobject. It should match the pathproperty instead of just /build/, i.e.,
我自己解决了这个问题。听起来很傻，但问题出publicPath在output物体下面。它应该匹配path属性而不是仅仅匹配/build/，即，
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
回答by Andre Evangelista
In my case I had to check where the webpack is serving the file.
就我而言，我必须检查 webpack 在哪里提供文件。
You can see it:
http://localhost:8080/webpack-dev-server
你可以看到：
http://localhost:8080/webpack-dev-server
Then I could see my bundle.js path > http://localhost:8080/dist/bundle.js
然后我可以看到我的 bundle.js 路径 > http://localhost:8080/dist/bundle.js
After that I used that /dist/bundle.jsin my index.html <script src="/dist/bundle.js"></script>
之后我/dist/bundle.js在我的 index.html 中使用了它<script src="/dist/bundle.js"></script>
Now it refreshes any file changes.
现在它会刷新任何文件更改。
回答by takacsmark
webpack-dev-server serves your bundle.js from memory. It won't generate the file when you run it. So bundle.js is not present as a file in this scenario.
webpack-dev-server 从内存中提供你的 bundle.js。当您运行它时，它不会生成文件。所以 bundle.js 在这种情况下不作为文件存在。
If you wan't to use bundle.js, for example to optimize it's size or test your production deployment, generate it with webpack using the webpack command and serve it in production mode.
如果您不想使用 bundle.js，例如优化它的大小或测试您的生产部署，请使用 webpack 命令使用 webpack 生成它并在生产模式下提供它。
回答by Oleksandr Grin
Dev-server keeps the compiled file in memory, and I can't access it directly... BUT! THE SOLUTION is that you have no need to access it, in development(even when you run your project on node server or localhost) use localhost:8080 to access your page, and that's where webpack-dev-server is serving your page and you can feel all advantages of using it(live reload!), BUT! it doesn't compile your bundle.js, SO! before production, you need to manually run webpack build command, and that's it! there is no way for dev-server to compile your bundle.js file! Good Luck!
开发服务器将编译后的文件保存在内存中，我无法直接访问它......但是！解决方案是你不需要访问它，在开发中（即使你在节点服务器或本地主机上运行你的项目）使用 localhost:8080 来访问你的页面，这就是 webpack-dev-server 为你的页面提供服务的地方可以感受到使用它的所有优点（实时重新加载！），但是！它不会编译您的 bundle.js，所以！在生产之前，您需要手动运行 webpack build 命令，仅此而已！dev-server 无法编译您的 bundle.js 文件！祝你好运！
