CODEWITHSUNDEEP
javascriptwebpack
aaa
aaa

Reputation: 393

webpack-dev-server not serving index.html generated by HtmlWebPackPlugin

I have the following webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: { extensions: ["*", ".js"] },
    output: {
        path: path.resolve(__dirname, "public/dist/"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: __dirname,
        port: 3000,
        publicPath: "http://localhost:3000/dist/",
        proxy: {
            '/api' : {
                target: 'http://localhost:8000',
                secure: false
            }
        },
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebPackPlugin({
            hash: true,
            template: "./src/index.html",
            filename: "index.html"
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()]
    }
};

When I run webpack-dev-server, everything compiles fine, but when I navigate to localhost:3000/public/dist/index.html, I get a "file not found" error.

However, when I run webpack --mode development, the index.html file is correctly written to public/dist and I'm able to open it on my web browser.

I'm not sure why this file is correctly written when webpack is run normally, but not when the dev server is ran. I know the webpack dev server serves files from memory so I don't expect it to show up on my filesystem but I at least expect to be able to open it from the browser.

Thanks!

Upvotes: 1

Views: 3732

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10792

Webpack dev server doesn't actually build the files to your project directory. From their docs:

webpack-dev-server doesn't write any output files after compiling. Instead, it keeps bundle files in memory and serves them as if they were real files mounted at the server's root path.

So running webpack-dev-server, you shouldn't expect to see any built files (like your resultant index.html) in your dist directory. It will be serving the project from memory directly to your localhost:3000, or whatever pathname you choose. However, running webpack actually builds the files to your destination directory, and you'll find them there. Hope that clears it up for you.

Upvotes: 2

Related Questions