Webpack dev server respond 404 if set entry name or output.fileName with prefix ‘/’.

I’m submitting a bug report

Webpack version: 2.1.0-beta.25 webpack-dev-server@2.1.0-beta.9

Please tell us about your environment: Linux

Current behavior: If set entry name or output.fileName with prefix ‘/’，the entry file will be responded as 404.

Expected/desired behavior:

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        '/app': './src/index.js',
    },

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

    devServer: {
        historyApiFallback: true,
        port: 3000,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
};

OR

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

• What is the expected behavior?
• What is the motivation / use case for changing the behavior?
• Browser: all
• Language: all

[dhardtke]

I’m having a similar issue that does not occur with

"webpack-dev-server": "1.14.1",
"webpack-dev-middleware": "1.8.4",

This is my webpack.common.js:

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const helpers = require("./helpers");

module.exports = {
    cache: true,

    resolve: {
        extensions: [".ts", ".js", ".json"],

        // An array of directory names to be resolved to the current directory
        modules: [
            helpers.root("app"),
            "node_modules"
        ]
    },

    module: {
        loaders: [
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: "file?name=assets/[name].[hash].[ext]"
            },
            {
                // only embed css files that are being required in app/ due to angular2-template-loader
                test: /\.css$/,
                include: helpers.root("app"),
                loader: "to-string-loader!css-loader"
                // alternative: raw
            },
            {
                // embed and load (inject) css files that are everywhere but in app
                test: /\.css$/,
                exclude: helpers.root("app"),
                loader: "to-string-loader!style-loader!css-loader"
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ["raw-loader", "sass-loader"] // sass-loader not scss-loader
            },
            {
                test: /\.html$/,
                loader: "html"
                // alternative: raw
            }
        ]
    },

    // see https://github.com/webpack/webpack/issues/1716 regarding trailing slashes
    output: {
        path: helpers.root("dist/"),
        publicPath: "/dist/",
        filename: "[name].[hash].js",
        chunkFilename: "[id].[hash].chunk.js"
    },

    plugins: [
        // correct order of assets inclusion
        new webpack.optimize.CommonsChunkPlugin({
            name: ["polyfills", "vendor"].reverse()
        }),

        new HtmlWebpackPlugin({
            template: "./app/index.tpl.html",
            filename: "../index.html",
            chunksSortMode: "dependency",
            minify: false
        }),

        new webpack.LoaderOptionsPlugin({
            options: {
                minify: true,
                htmlLoader: {
                    removeAttributeQuotes: false,
                    caseSensitive: true
                }
            }
        }),

        // see https://github.com/AngularClass/angular2-webpack-starter/issues/993#issuecomment-246883410
        new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, __dirname)
    ]
};

and this is my webpack.dev.js:

const webpackMerge = require("webpack-merge");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const commonConfig = require("./webpack.common.js");
const helpers = require("./helpers");

module.exports = webpackMerge(commonConfig, {
    entry: {
        "polyfills": "./app/polyfills.ts",
        "app":       "./app/main.ts",
        "vendor":    "./app/vendor.ts"
    },

    module: {
        loaders: [
            {
                test:    /\.ts$/,
                loaders: [
                    "awesome-typescript-loader",
                    "angular2-template-loader",
                    "angular2-router-loader?aot=false"
                ]
            }
        ]
    },

    //devtool: "cheap-module-eval-source-map",

    output: {
        path:          helpers.root("dist"),
        publicPath:    "/",
        filename:      "[name].js",
        chunkFilename: "[id].chunk.js"
    },

    plugins: [
        new ExtractTextPlugin("[name].css")
    ],

    devServer: {
        historyApiFallback: true,
        stats:              "minimal",
        proxy:              {
            "/rest": {
                target: "http://127.0.0.1:8080",
                secure: true
            }
        }
    }
});

If I use webpack-dev-server@1.14.1 everything is fine, but with webpack-dev-server@2.1.0-beta.9 the resulting index.html is minified (which it shouldn’t be), also the <script> and <link> tag URLs are wrong.

Instead of <script src="/app.js"></script> I get <script src="/dist/app.arandomhash.js"></script>.

Can’t use 2.1.0-beta.9 then 😦

[ibufu]

@SpaceK33z, thank you very much, I will help you as far as I can:).