webpack-dev-server cannot get /

[tzcodingjs]

• Operating System:Windows 10
• Node Version: v8.9.3
• NPM Version: v5.5.1
• webpack Version: v3.10.0
• webpack-dev-server Version: v2.9.5

• [x] This is a bug
• [ ] This is a modification request

Code

  // webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

var getHtmlConfig = function (name, title) {
    return {
        template: './demos/'+ name +'.html',
        filename: 'demos/' + name + '.html',
        title: title,
        inject: true|'body',
        hash: true,
        cache: true,
        chunks: ['common', name]
    };
};

module.exports = {
    entry: {
        'common':'./js/common.js',
        'jxtl'  : './js/jxtl.js'
    },

    devServer: {
        host: '0.0.0.0',
        useLocalIp: true,
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 9000
      },

    module: {
        loaders: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'px2rem-loader?remUnit=24&remPrecision=8']
                  })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'px2rem-loader?remUnit=46.875&remPrecision=8','sass-loader']
                  })
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                loader: 'url-loader',
                options: {
                    limit: 2048,
                    name: 'images/[name].[ext]'
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: 'fonts/[name].[ext]'
                }
            }
        ]
    },

    externals: {
        jquery: 'window.jQuery',
      },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].min.js'
    },

    plugins: [
        // new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin(getHtmlConfig('jxtl', 'jxtl')),
        new ExtractTextPlugin('css/[name].css')
    ]
};

Expected Behavior

My project can run successful on browser when I ran 'npm start'

Actual Behavior

'cannot get /' on browser.

For Bugs; How can we reproduce the behavior?

You can run this config of webpack directly. And this is my file structure :

/
   /demos/
     All html files
   /js/
     All js files
   /css/
     All css files
 webpack.config.js
 packages.json

I rechecked my config of webpack base on Unclear how to use publicPath(s) #1494,but it also can't ran successful.

[hg-pyun]

You can use publicPath options. Check the publicPath document.

[tzcodingjs]

@hg-pyun It also failure. Can you describe it in detail? Thanks!

This is my options.

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].min.js',
        publicPath:'/'
    }

Only on way to sucessfull, ran 'npm run build' first, and ran 'npm start' second. But I don't know reason.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack --env.production"
  }

[hg-pyun]

@Tzcodejs
Are you using the javascript bundle file(production) on WDS(webpack-dev-server)? webpack-dev-server uploads a built javascript to the memory on the public path. It also serve file on the contentBase path files.

contentBase: path.resolve(__dirname, 'dist'). 

If the dist folder is not exist, WDS doesn't serve any file. So, It is successful, ran npm run build first.
Here is my simple exmaple. https://github.com/hg-pyun/rapid-installer/commit/d0e6a85c0da9f6bfb397872636cbfc3f55901872. I wish you could refer.

Thank you.

[tzcodingjs]

@hg-pyun Thank you very much!

[alexander-akait]

Based on comment above problem is solved. Feel free to feedback.