webpack-dev-server: 404 Errors after updating to V 2.4.1

After updating Webpack to V2.2.1 the HMR stopped working thus I decided to update Webpack-Dev-Server V2.4.1. But Now I’m getting 404 errors :

Failed to load resource: the server responded with a status of 404 (Not Found) vendor.js
Failed to load resource: the server responded with a status of 404 (Not Found) app.js

My config file:

const PATHS = {
  root: path.join(__dirname),
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'dist')
}

const base = {
  entry: {
    app: [
      'babel-polyfill',
      PATHS.app + '/index.js'
    ],
    vendor: ['react', 'react-dom', 'react-router', 'redux', 'react-redux']
  },
  resolve: {
    modules: [
      path.resolve('./app'),
      'node_modules'
    ],
  }
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  output: {
    path: PATHS.build,
    filename: '/[name].js'
  },
  module: {
    loaders: [
      {test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.style.js$/, loader: 'style-loader!css-loader!postcss-loader?parser=postcss-js!babel-loader'},
      {test: /\.css$/, loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]&importLoader=1!postcss-loader'},
      {test: /\.scss$/, loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]&postcss-loader!sass-loader'},
      {test: /\.(jpg|png)$/, loader: 'file-loader?name=[path][name].[hash].[ext]', include: PATHS.app + '/media/images'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff'},
      {test: /\.(ttf|eot|svg|mp3)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=[path][name].[hash].[ext]'}
    ]
  },
  devServer: {
    contentBase: PATHS.build,
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: 'errors-only'
  },
  plugins: [HTMLWebpackPluginConfig, ScriptExtHtmlWebpackPluginConfig, new webpack.HotModuleReplacementPlugin(), CleanDistPlugin, CommonsChunkPlugin, CopyFilesPlugin, CreateFaviconsPlugin]
}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 22 (6 by maintainers)

Most upvoted comments

I’m also seeing 404s.

In my webpack.config.js:

var path = require('path');

module.exports = {
  context: __dirname,
  entry: './src/widgets.jsx',
  output: {
    path: path.resolve(__dirname, '/dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/],
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
  devtool: 'source-maps',
  resolve: {
    extensions: ['.js', '.jsx', '*']
  }
}

However, if I hard code the output as follows, it works as expected:

output: {
  filename: './dist/bundle.js'
}

Also, I should mention that everything seems to work find if my bundle is not nested. If, for example, my output is like below (and provide the correct script source), then it can be found:

output: {
  filename: './bundle.js'
}

Is there something else I need to do? Or is this an identifiable bug? Any help is much appreciated!

louisscruz on Mar 6, 2017

I don’t get how to avoid 404, my image /img/background.jpg was correctly retrievable with webpack 1 but not anymore :

webpack.config.js

  output: {
    // Webpack compilation directory
    path: `${__dirname}/build`,
    // Webpack main bundle file name
    filename: 'bundle.js',
    // Webpack chunks files namesc
    chunkFilename: '[id].chunck.js',
    publicPath: '/',
  }
  module: {
    rules: [
      {
        test: /\.jpg$/,
        // was  'file-loader?name=/img/[name].[ext]' in my webpack 1 config
        loader: 'file-loader?name=[name].[ext]&outputPath=./build/img/&publicPath=/img/',
      },
    ]
  },
  devServer: {
    port: 3333,
    // Web directory serve by the webpack dev server
    contentBase: path.resolve(__dirname, 'build'),
  }

Can someone help me?

Note that if I build my app, the image is inside the right folder.

EDIT:

Ok the right configuration of file-loader is :
loader: 'file-loader?name=[name].[ext]&outputPath=./img/',

serut on Mar 9, 2017

Oh it’s output: { publicPath: '/' }.

SpaceK33z on Feb 25, 2017

Can you try adding publicPath: '/' to your base object?

If that isn’t it I’ll need a repository reproducing your issue. It can take a while though before I can help you since I’m going on vacation tomorrow. If you want a quick answer perhaps StackOverflow is a better place to go to (HMR is not broken in WDS 2.4.1).

SpaceK33z on Feb 25, 2017