How do I solve Content not from webpack is served from in react webpack?

Question

I am new to reactjs and I am trying to setup react, babel and webpack to convert jsx and es2015 code to 1 file.

The basic app is compiling well but I see the words below when compiling

Content not from webpack is served from /app

[./src/app/index.js] 27 bytes {main} [built]
i ｢wds｣: Project is running at http://localhost:1234/
i ｢wds｣: webpack output is served from /app/
i ｢wds｣: Content not from webpack is served from C:\Users\coder\Documents\nodeprojects\my-react\src

This is how my webpack.config.js file config looks like:

module.exports = {
  entry: path.resolve(__dirname, 'src') + '/app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist') + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

My project structure looks like this:

project_folder

dist

node_modules

src

app

index.js

index.html

Do you know how can I avoid Content not from webpack is served from /app or I don't need to bother it? Any help is appreciated. thanks

Dimitri Kopriwa Dimitri Kopriwa · Accepted Answer · 2019-05-13T12:56:12

If you are new to react, I suggest you to use create-react-app to get started with the basic webpack, babel.

A project can be created with

npx create-react-app myapp

If you want to study their configuration, you can eject within your project:

npm run eject

Otherwise, your public path should not be exposed from the root path /app, but preferably src/app or better, just use src.

If you have a backend app and frontend app, you should make two different package.

How do I solve Content not from webpack is served from in react webpack?

1 Answers