CODEWITHSUNDEEP
webpackwebpack-dev-server
Roman Kolesnikov
Roman Kolesnikov

Reputation: 12147

Serving static assets in webpack dev server

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?

Upvotes: 84

Views: 125215

Answers (5)

Nikolai R Kristiansen
Nikolai R Kristiansen

Reputation: 627

You can do:

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

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

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

If you are using webpack-dev-server >=4,<4.7 it's onBeforeSetupMiddleware or using v3 it's devServer.before.

Upvotes: 10

Domske
Domske

Reputation: 5695

Update (webpack-dev-server 4)

Since the latest version. You have to replace contentBasePublicPath and contentBase (see original solution below) with static.directory and static.publicPath. The feature still works.

webpack.config.js

{
  devServer: {
    static: { 
      directory: path.resolve(__dirname, './assets'), 
      publicPath: '/assets'
    }
  }
}

Tested with webpack 5.58.2, webpack-cli 4.9.0, webpack-dev-server 4.3.1.

Keep reading the Original solution for further information.

Original (webpack-dev-server 3)

For everyone who wants real static files without copying them and landed here. The Webpack output configuration publicPath does not work.

You need the DevServer property contentBase and optional contentBasePublicPath.

The documentation really lacks on these properties. So let me explain:

Use case: You want to use static files like videos, sounds and images without copying them. In this example create a folder assets in your project root directory. The rest configuration is default (src, dist).

webpack.config.js

{
  devServer: {
    contentBase: path.resolve(__dirname, './assets'),
    contentBasePublicPath: '/assets'
  }  
}

Without contentBasePublicPath the assets are accessible with root URL. Since contentBase only defines the folder content.

Example: Place an image file "test.png" into your assets folder.

Without contentBasePublicPath you can access it with e.g. <img src="test.png">. With contentBasePublicPath you can use <img src="assets/test.png">.

your-project
|- assets
|  |- test.png
|- dist (...)
|- src (...)

You can use any path you want. E.g. move the assets to your src folder. Just place all assets here. It will not be processed / touched by the build. And the app is still loading from the default root (dist) path. This is what we want. The simplest and best solution in my opinion.

Tested with a TypeScript project and Webpack 5 (webpack-cli 4, webpack-dev-server 3). 👍

Upvotes: 14

insub
insub

Reputation: 41

i use proxy:

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

Upvotes: 3

Katana24
Katana24

Reputation: 8959

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.

Upvotes: 57

dreyescat
dreyescat

Reputation: 13818

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/'
}

Upvotes: 45

Related Questions