I am having the problem with webpack 404 "cannot get". What can it be?

Asked

Viewed 71 times

1

Here my config:

var path = require('path');
const webpack = require('webpack');
const publicPath = '/dist/assets/';


module.exports = {
   entry: './src/index.js',
   devtool: 'cheap-module-source-map',
   plugins: [
    new webpack.HotModuleReplacementPlugin() // Enable HMR
  ],

  output: {
    path: path.join(__dirname, '/dist/assets'),
    filename: '[name].bundle.js',
    publicPath: publicPath,
    sourceMapFilename: '[name].map'
  },

  devServer: {
    port: 7777,
    host: 'localhost',
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    publicPath: publicPath
  },
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }, {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

And here the index.js:

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
import Library from './library';


function component() {
  var element = document.createElement('div');

// Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');
// Add the image to our existing div.
   var myIcon = new Image();
   myIcon.src = Icon;
   element.appendChild(myIcon);
  return element;
}

if (module.hot) {
  module.hot.accept('./library', function() {
    console.log('Accepting the updated library module!');
    Library.log();
  })
}

document.body.appendChild(component());

Here the CMD log:

Project is running at http://localhost:7777/ webpack output is served from /dist/Assets/ 404s will fallback to /index.html 97 modules webpack: Compiled successfully.

And the complete code here.

PS: The location of my index.html is in Assets as specified in the output of config.

javascript react webpack

1 answer

0

The problem was solved by adding contentBase: path.Join(__dirname, '/dist/Assets/') to devserver. The code there is updated with the changes.

Browser other questions tagged javascript react webpack

You are not signed in. Login or sign up in order to post.