Serving static assets in webpack dev server

Question

I run webpack-dev-server from the root folder of my project. I have assets folder in /src/assets that is copied by CopyWebPackPlugin:

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])

If I put logo.png inside assets folder then After running webpack-dev-server I can't access http://localhost/assets/logo.png file, but can access http://localhost/src/assets/logo.png file. However if I run in production mode the situation turns upside down.

How to configure webpack server to make http://localhost/assets/logo.png file accessible in development mode?

Answer 1

You can tell webpack to use a different path when loading from the browser.

In the output section of your webpack config file add a publicPath field pointing to your assets folder.

webpack.config.js

output: {
  // your stuff
  publicPath: '/assets/'
}

Answer 2

I would add that it was the opposite for me. I originally had my images and .obj/.mtl files in a public folder that existed at the root of my application. I moved them into an assets folder that was created in the app folder.

Performing an npm install --save-dev copy-webpack-plugin and adding the

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])

to the webpack.common.js file fixed my problem.

Answer 3

i use proxy:

proxy: {
  '/static': {
      target: 'http://localhost:3333',
      pathRewrite: {'^/static' : '/app/static'}
   }
}

Answer 4

You can do:

const path = require('path');
const path = require('express');

module.exports = {
  devServer: {
    before: (app) => {
      app.use('/assets/', express.static(path.resolve(__dirname, 'src/assets')));
    }
  }
}

My case was to serve files from outside the project root path, and then CopyWebpackPlugin felt like the wrong approach.

Update: If you are using webpack-dev-server v4 it's devServer.onBeforeSetupMiddleware instead of devServer.before