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

[ibufu]

I'm submitting a bug report

Webpack version:
2.1.0-beta.25
[email protected]

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

[ibufu]

It works at [email protected].

[SpaceK33z]

Marking as a low prio bug, because this is clearly a wrong configuration scenario.

AFAIK there were no related changes here that can cause this to differ. However, a lot changed in webpack-dev-middleware that is related to this, so it could be that when it worked with 1.14.1, this was because dev-middleware wasn't updated yet.

Could you check again with [email protected], and make sure the latest version of webpack-dev-middleware is installed?

[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 [email protected] everything is fine, but with [email protected] 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 :(

[SpaceK33z]

@dhardtke, this is not really related.

The file being minified is something that is not in webpack or webpack-dev-server hands. This could be due to a change in html-loader or html-webpack-plugin, but webpack doesn't even "know" how to minify html.

The script and link URL's appearing in a different subdirectory + with a random hash looks like an issue with either webpackMerge or that you're not loading the correct webpack config (webpack.dev.js).

PS: I fixed your formatting issues, you should use a backtick when mentioning <script>, otherwise GitHub ignores it.

[dhardtke]

I think it is related though. Only happens when using 2.1.0-beta.9, but it works with 1.14.1. How can that be?

[SpaceK33z]

A lot has changed in webpack v2. This issue is about using a prepended slash in output.filename, and @ibufu says that it works without this prepended slash. That's definitely something different.

Edit: Removed the first part of this comment since I was confused with another ticket.

[dhardtke]

I did try using an absolute URL in output.publicPath. Still no difference. It's like webpack completely ignores my settings (even though I dumped the output of the merge() call and there is absolutely no difference). Maybe it is a bug in https://github.com/ampedandwired/html-webpack-plugin, need to investiagte further...

[SpaceK33z]

@ibufu, I've looked into this and came to the conclusion that we can't fix this without a chance of breaking other things. This is a configuration error, because you should not use a slash in output.filename or in an entry key.

However, I added this to the list of more config validation in #615. I can imagine more people running into this, so on the long run we can add an error / warning that this doesn't work.

[ibufu]

@SpaceK33z, slash is a necessary configuration for SPA with htmlWebpackPlugin. Would it be fixed in future?

[SpaceK33z]

No it's not, i'm also using htmlWebpackPlugin everywhere and it works ;). I think you mean the filename option for the plugin itself new HtmlWebpackPlugin({filename: '...'}).

[ibufu]

@SpaceK33z, for example, my configuration:

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

then the html file generated by htmlWebpackPlugin will be:

<script src="/app.js"></script>

The absolute path is required for single page application.
But now webpack dev server will response 404 of app.js.

[SpaceK33z]

Ah okay, but the filename is the wrong place for that. If you want to change that path, you need to use output.publicPath.

[ibufu]

I don't want to change that path, I just want htmlWebpackPlugin generate html file that js file with prefix '/' like this:

<script src="/app.js"></script>

And at [email protected], it is a easy way to achieve it by the above configuration.

[SpaceK33z]

@ibufu, I created webpack/webpack-dev-middleware#145 for it, since it's a problem in webpack-dev-middleware (I think, could also be in webpack itself). I'll take a look at it when I have the time.

[ibufu]

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