Webpack-dev-server: Blank page - bundle not executed.

[mishaszu]

• Operating System: MacOS 10.13.4
• Node Version: 8.11.3
• NPM Version: 6.2
• webpack Version: 4.12.2
• webpack-cli: 3.0.8

• webpack-dev-server Version: 3.1.14

• [x] This is a bug

• [ ] This is a modification request

Code

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, '../src'),
    entry: './index.tsx',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist'),
    },
    devServer: {
        hot: true,
        open: true,
        port: 9000,
        inline: true,
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', 'jsx'],
    },
    module: {
        rules: [
            {
                test: /\.(tsx|ts)$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

index.tsx

console.log('test')

package.json

"start": "webpack-dev-server --config ./webpack/webpack.config.js"

Expected Behavior

Serve blank application that logs 'test' in console.
I'd like to display react application, but it seems website served by webpack-dev-server never executes bundle code.

Actual Behavior

Blank page, no log.
If I add publicPath to output webpack-dev-server displays only already bundled content from dist, no HMR.
Application works if bundled with webpack and run manually.
I tried few configuration with contentBase and watchContentBasebut always:

• if there is HMR log in console there is no bundle code executed
• if there is no HMR log webpack-dev-server doesn't bundle anything only serves already builded static files

For Bugs; How can we reproduce the behavior?

Webpack configuration.

[mishaszu]

I found out that running via CLI with flags works:

"start": "webpack-dev-server --mode development --config ./webpack/webpack.config.js --hot --open"

but running with webpack config doesn't:

"start": "webpack-dev-server --mode development --config ./webpack/webpack.config.js"

devServer: {
    hot:true,
    open: true,
}

[fsultani]

You have filename: '[name].bundle.js', in webpack.config.js. I don't know if that's right. That object should look more like

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
},

For your script, try adding in flags for the entry point, and the output:
"start": "webpack-dev-server --entry ./src/index.tsx --output-filename ./dist/bundle.js"

See if that works, though I don't know if .tsx is the right extension. May need to compile to js.

[brandonwiemann]

I was having this exact same issue and realized that I was using optimization.splitChunks in my default webpack config but wasn't linking to the common (chunked) script on my entry page. Hopefully this helps someone else.

[talolard]

@brandonwiemann This sounds like what I'm doing wrong and suffering with.
Could you shed more lite on how to link common scripts ?

[jsaunie]

@brandonwiemann This sounds like what I'm doing wrong and suffering with.
Could you shed more lite on how to link common scripts ?

It's about _HtmlWebpackPlugin_ plugin, to link chunks you need to named it before :

{ optimization: { splitChunks: { cacheGroups: { commons: {test: /[\\/]node_modules[\\/]/, name: **"common"**, chunks: "all"} } } }, plugins: [ .... new HtmlWebpackPlugin({ title: "Skill Mill", hash: true, filename: 'index.html', //relative to root of the application chunks: [**'common'**, 'app'], path: path.resolve(__dirname, 'dist'), template: './src/index.html', }), ... ] }

[Nagibaba]

In my case it was due to Babel and React. If you use React, then try to call ./src/index.js directly and use "@babel/preset-env", "@babel/preset-react" in your .babelrc. You can take a look at my gist. https://gist.github.com/Nagibaba/14e898d99a4be89b00a60d28abc19bc0

[goleary]

This issue for me was a result of the template for HtmlWebpackPlugin having the same path/name as the generated index.html. On file changes the the bundles were rebuilt but the original template file was served (with no script tags) instead of the generated file.

The fix was a simple changing of the template filename & updating the name in the HtmlWebpackPlugin plugin config to this new name.