Webpack-dev-server 编译文件但不刷新或使编译的 javascript 可用于浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36039146/
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 compiles files but does not refresh or make compiled javascript available to browser
提问by Chris Schmitz
I'm trying to use webpack-dev-server to compile files and start up a dev web server.
我正在尝试使用 webpack-dev-server 来编译文件并启动一个开发网络服务器。
In my package.jsonI have the script property set to:
在我package.json的脚本属性设置为：
"scripts": {
"dev": "webpack-dev-server --hot --inline",
}
So the --hotand --inlineshould enable the webserver and the hot reloading (as I understand it).
因此，--hot与--inline应使网络服务器和热重载（据我所知）。
In my webpack.config.jsfile I set the entry, output, and devServer settings as well as add a loader to look for changes in .vuefiles:
在我的webpack.config.js文件中，我设置了入口、输出和 devServer 设置，并添加了一个加载器来查找.vue文件中的更改：
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
So with this setup, I run npm run dev. The webpack-dev-server starts up, the module loader test works (i.e. when I save any .vue file it causes webpack to recompile), but:
因此，通过此设置，我运行npm run dev. webpack-dev-server 启动，模块加载器测试工作（即当我保存任何 .vue 文件时，它会导致 webpack 重新编译），但是：
- The browser never refreshes
- The compiled javascript that gets stored in memory is never made available to the browser
- 浏览器从不刷新
- 存储在内存中的已编译 javascript 永远不会对浏览器可用
On that second bullet, I can see this because in the browser window the vue placeholders are never replaced and if I open up the javascript console the Vue instance is never created or made available globally.
在第二个项目符号上，我可以看到这一点，因为在浏览器窗口中，永远不会替换 vue 占位符，如果我打开 javascript 控制台，永远不会创建 Vue 实例或使其全局可用。
What am I missing?
我错过了什么？
采纳答案by Chris Schmitz
Two things were causing my problems here:
有两件事导致了我的问题：
module.exports = {
entry: './src/index.js',
output: {
// For some reason, the `__dirname` was not evaluating and `/public` was
// trying to write files to a `public` folder at the root of my HD.
path: __dirname + '/public',
// Public path refers to the location from the _browser's_ perspective, so
// `/public' would be referring to `mydomain.com/public/` instead of just
// `mydomain.com`.
publicPath: '/public',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer:{
// `contentBase` specifies what folder to server relative to the
// current directory. This technically isn't false since it's an absolute
// path, but the use of `__dirname` isn't necessary.
contentBase: __dirname + '/public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
Here's the fixed webpack.config.js:
这是固定的webpack.config.js：
var path = require('path');
module.exports = {
entry: [
'./src/PlaceMapper/index.js'
],
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'public/')
},
devtool: 'source-map',
devServer:{
contentBase: 'public'
},
module:{
loaders:[
{ test: /\.vue$/, loader: 'vue'}
]
}
};
回答by Serdar De?irmenci
After a long search I found the solution for my problem, in my case output pathwasn't configured correctly.
经过长时间的搜索，我找到了问题的解决方案，在我的情况下，输出路径配置不正确。
This configuration solved my problem:
这个配置解决了我的问题：
const path = require('path');
module.exports = {
"entry": ['./app/index.js'],
"output": {
path: path.join(__dirname, 'build'),
publicPath: "/build/",
"filename": "bundle.js"
}....
回答by Shakiba Moshiri
the right solution
正确的解决方案
Tell dev-serverto watchthe files served by the devServer.watchContentBaseoption.
告诉dev-server给观看由所服务的文件devServer.watchContentBase选项。
It is disabled by default.
默认情况下它是禁用的。
When enabled, file changes will trigger a full page reload.
启用后，文件更改将触发整页重新加载。
Example:
例子：
module.exports = {
//...
devServer: {
// ...
watchContentBase: true
}
};
回答by Bing
I had the same problem and I find that in addition to all those points, we also have to put the index.html together with the output bundle.js in the same folder and set the contentBase to this folder, either the root or a subfolder.
我遇到了同样的问题，我发现除了所有这些点之外，我们还必须将 index.html 与输出 bundle.js 放在同一文件夹中，并将 contentBase 设置为该文件夹，无论是根文件夹还是子文件夹.
回答by Polv
Somehow, for my case, removing "--hot" makes it work. So, I removed hot: true
不知何故，就我而言，删除“--hot”使其工作。所以，我删除了hot: true
webpack.dev.js
webpack.dev.js
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
publicPath: '/js/',
contentBase: path.resolve(__dirname, 'docs'),
watchContentBase: true,
}
});
webpack.common.js
webpack.common.js
output: {
path: path.resolve(__dirname, 'docs/js'),
filename: '[name].min.js',
library: ['[name]']
},
回答by Serdar De?irmenci
It can happen because of ExtractTextPlugin. Deactive the ExtractTextPlugin in development mode. Use it only for production build.
这可能是因为ExtractTextPlugin。在开发模式下停用 ExtractTextPlugin。仅将其用于生产构建。
回答by Ogglas
This happened to me as well after running two different applications on the same webpack-dev-serverport after one another. This happened even though the other project was shut down. When I changed to a port that had not been used it started working directly.
在同一个webpack-dev-server端口上一个接一个地运行两个不同的应用程序后，这也发生在我身上。即使另一个项目被关闭，这种情况还是发生了。当我更改为一个未使用的端口时，它直接开始工作。
devServer: {
proxy: {
'*': {
target: 'http://localhost:1234'
}
},
port: 8080,
host: '0.0.0.0',
hot: true,
historyApiFallback: true,
},
If you use Chrome like me then just open Developer Toolsand click on Clear site data. You can also see if this is the problem by running the site in incognito mode.
如果您像我一样使用 Chrome，那么只需打开Developer Tools并单击Clear site data。您还可以通过在隐身模式下运行站点来查看这是否是问题所在。
回答by nflauria
I experienced a similar situation where webpack-dev-serverwas serving my index.htmlfile but not updating. After reading a few posts I realized that webpack-dev-serverdoes not generate a new js file but instead injects one into index.html.
我遇到了类似的情况，webpack-dev-server正在提供我的index.html文件但没有更新。在阅读了几篇文章后，我意识到这webpack-dev-server不会生成新的 js 文件，而是将一个注入到 .js 文件中index.html。
I added the html-webpack-pluginto my app and with the following configuration in my webpack.config.jsfile:
我添加html-webpack-plugin到我的应用程序并在我的webpack.config.js文件中使用以下配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
I then commented out the script tag referencing my entry js file in index.html. I can now run webpack-dev-serverwithout any additional flags and any changes to my files will display in the browser instantly.
然后我注释掉了引用我在index.html. 我现在可以在webpack-dev-server没有任何额外标志的情况下运行，对我的文件所做的任何更改都会立即显示在浏览器中。
回答by tel
I'll add my own special tale of Webpack --watchwoe to the wall of suffering here.
我将把我自己的关于 Webpack--watch灾难的特殊故事添加到这里的痛苦之墙中。
I was running
我之前在跑步
webpack --watch
in order to build a Typescript project. The compiled .jsfiles would update, but the bundle that the browser was seeing would not. So I was basically in the same position as the OP.
为了构建一个打字稿项目。编译后的.js文件会更新，但浏览器看到的包不会更新。所以我基本上和OP处于相同的位置。
My problem came down to the watchOptions.ignoredparameter. The original author of the build config had set up ignoredas a filter function, which turns out to not be a valid value for that parameter. Replacing the filter function with an appropriate RegExpgot the --watchbuild working again for me.
我的问题归结为watchOptions.ignored参数。构建配置的原作者已设置ignored为过滤器函数，结果证明该参数不是有效值。用适当的替换过滤器功能RegExp使--watch构建再次为我工作。
回答by Ойбек Абдуллаев
Your project tree is not clear, however the problem may be in contentBase setting. Try to set contentBase: __dirname
您的项目树不清楚，但问题可能出在 contentBase 设置中。尝试设置 contentBase: __dirname
