Description
Summary
Hi there, I just upgraded to v3.0.7 and noticed that hot reloading via webpack-dev-server has broken in a development environment.
Steps: Start webpack-dev-server, edit a watched source file
Expected behavior: Observe that the bundle re-compiles, and the updated bundle is served to the browser.
Actual behavior as of 3.0.7: Observe that the bundle re-compiles, but the updated bundle is not served to the browser. Note that no errors or warnings are logged.
The expected behavior and actual behavior are identical in 3.0.6 and earlier.
The only change moving from 3.0.6 -> 3.0.7 is pretty minor: 26dcb98 not sure if it is directly related.
I haven't had time yet to whip up a full MCVE, but here are some snippets of config and environment to help provide context:
Config
Irrelevant portions of the config are snipped.
webpack.config.js:
module.exports = {
entry: {
main: ...,
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js',
},
module: {
rules: [
{
test: /src\/.+\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
loader: 'html-loader',
},
],
},
plugins: [
...
new HTMLWebpackPlugin({
template: 'src/resources/templates/index.html',
inlineSource: '.js$',
}),
new HtmlWebpackInlineSourcePlugin(),
].filter(Boolean),
devServer: {
historyApiFallback: true,
publicPath: '/',
},
};And the template index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
/>
</head>
<body>
<div id="app"></div>
</body>
</html>Environment
Operating system: linux 4.13.0-37-generic
Node: 8.9.0
npm: 5.6.0
Webpack version: 4.1.1
Library version: 3.0.7
Metadata
Metadata
Assignees
Labels
Projects
Milestone
Relationships
Development
Participants
Activity
jantimon commentedon Mar 19, 2018
Is it fixed if you remove the compilerName parameter from the single entry plugin in your node_modules/html-webpack-plugin/lib/compiler.js ?
LINKIWI commentedon Mar 19, 2018
Yes, it does seem that removing the
compilerNameparameter causes hot reloading to work correctly, and adding it back breaks it.jantimon commentedon Mar 19, 2018
Could you please try to reach out for maintainers of HMR or dev server?
I don’t understand why setting a name might cause these problems.
Maybe @sokra knows why
hjeti commentedon Mar 20, 2018
This same change also breaks the stats json that is outputted by the WebpackBundleAnalyzer. So it's not possible to analyze builds anymore when you have version 3.0.7 installed of the html-webpack-plugin. The json that is outputted is not valid json:
"assetsByChunkName": { "html-webpack-plugin for " index.html "": "index.html" },It works again when I remove the compilerName parameter. I think these issues are somehow related that's why I added this as a comment and not as a separate issue.
jantimon commentedon Mar 20, 2018
@LINKIWI @hjeti could you please try to replace
html-webpack-plugin/lib/compiler.js
Line 49 in df32593
With
This would remove all whitespaces and quotes from the name.
sokra commentedon Mar 20, 2018
I don't know. Weird. I could image this is caused either by
",/or spaces in the chunk name. For the mini-css-extract-plugin I used*as entry name. That worked fine.hjeti commentedon Mar 20, 2018
@jantimon the path.basename fix works for me
LINKIWI commentedon Mar 20, 2018
@jantimon Unfortunately that patch does not seem to fix the HMR issue.
ghost commentedon Mar 20, 2018
HMR nope.
jantimon commentedon Mar 20, 2018
Could you please try to use ‘*’ like @sokra proposed?
LINKIWI commentedon Mar 20, 2018
Changing the entry name to
'*'also does not seem to fix the HMR issue :/jantimon commentedon Mar 21, 2018
Sry I have no idea what causes this behavior and it was reported only once for now.
ghost commentedon Mar 21, 2018
It looks like more than once.
jantimon commentedon Mar 21, 2018
What would be your preferred solution?
14 remaining items