Serving static assets in webpack dev server

Solution 1:

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.

Solution 2:

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

Solution 3:

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.

Solution 4:

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). 👍