CODEWITHSUNDEEP
webpackwebpack-dev-server
voxtm
voxtm

Reputation: 490

Webpack 5 devServer not loading public static files

I have a file structure like this:

-node_modules
-public
--scripts
-src

And my webpack.config.js:

const path = require('path');

module.exports = () => {
    return {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'public/scripts'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /nodule_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                },
            ],
        },
        mode: process.env.WEBPACK_MODE || 'development',
        devServer: { 
            static: {
                directory: path.join(__dirname, 'public'),
                publicPath: '/scripts'
            },

            hot: true,
            compress: true,
            port: 3000,
        },
    };
};

My problem is that the browser doesn't load any content reporting: Failed to load resource: the server responded with a status of 404 (Not Found) at 192.168.0.11/:1

When I remove the publicPath property, the HTML is getting rendered but bundle.js isn't found.

Upvotes: 2

Views: 2811

Answers (1)

Ozahata
Ozahata

Reputation: 71

I hope this helps those who are looking for the answer. On webpack 5, we can set multiple paths to be public, just replacing the object with a list.

{
      ...
      devServer: {
        static: [
          path.join(__dirname, "build"),
          path.join(__dirname, "scripts"),
        ],
}

Upvotes: 3

Related Questions