CODEWITHSUNDEEP
javascriptreactjsnpmwebpack
David Essien
David Essien

Reputation: 1633

webpack bundle.js not found - 404 error

I'm trying to learn Webpack configuration, and I keep getting errors in my console. It seems like my webpack app.bundle.js is not been found.

The page loads and the content of my html file displays, but not in the app.bundle.js or the html file in have in my dist directory, not untill i run mpm build.

below is the code for the webpack configuration and the error

// import node.js native path module
const path  = require('path');
let webpack = require('webpack');

//require HtmlWebPackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const port = process.env.PORT || 3000;

//define constant for paths
const paths ={
 DIST: path.resolve(__dirname, 'dist'),
 SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js')
};

console.log(paths.DIST);

//webpack configuration
module.exports ={
entry: path.join(paths.JS, 'index.js'),
output: {
    path: paths.DIST,
    filename: 'app.bundle.js'
},

//set starting point for server
devServer: {
    contentBase: paths.SRC,
    host:'localhost',
    port: port,
    historyApiFallback: true,
    open: true,
    hot:true
},

//set webpack to use plugins
plugins: [
    new HtmlWebpackPlugin({
        template: path.join(paths.SRC, 'index.html'),
    }),
    new ExtractTextPlugin('style.bundle.css'),
    new webpack.HotModuleReplacementPlugin()
],

//configure loaders
module: {
    rules: [

        //setup babel loader
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: [
                'babel-loader',
            ],
        },

        //setup css loader
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader',
            }),
        },

        {
            test: /\.(png|jpg|gif)$/,
            use: [
              'file-loader',
            ],
          },
    ],
},

//enable JS files without adding their extensions
resolve: {
    extensions: ['.js', '.jsx'],
},

};

Here is the error on the browser console

Loading failed for the <script> with source “http://localhost:3000/js/app.bundle.js”

Source map error: request failed with status 404 Resource URL: http://localhost:3000/app.bundle.js Source Map URL: sockjs.js.map

Upvotes: 1

Views: 12139

Answers (2)

shinarix
shinarix

Reputation: 1

The same error happened to me because i didn't run Webpack.

npx webpack

Run it on the same directory as Webpack configuration script.

Upvotes: 0

anOkCoder
anOkCoder

Reputation: 363

The post is old but hopefully this helps some future person since I just solved a similar issue, here goes:

Ensure that the server root path and the output path makes sense for the files generating the 404 error. Specifically, the server root path, set by "contentBase: paths.SRC" points to the SRC folder but the JS files are output to paths.DIST. When a browser attempts to access these files the URL it uses points to the wrong location. Fix by either changing content base to DIST, or adding publicPath: paths.DIST, which will override contentbase.

Link to references for contentBase, and publicPath.

Upvotes: 1

Related Questions