The @planjs/webpack-upload-loader resolves import/require() on a file into a remote address

To begin, you'll need to install @planjs/webpack-upload-loader:

$ npm install @planjs/webpack-upload-loader --save-dev

Import (or require) the target file(s) in one of the bundle's files:

file.js

import img from './assets/logo.png';

Then add the loader to your webpack config. For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: '@planjs/webpack-upload-loader',
          },
        ],
      },
    ],
  },
};

ℹ️ The current loader must be executed before file-loader and url-loader

Type: Boolean Default: true

By default, @planjs/webpack-upload-loader generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.

You can enable a CommonJS module syntax using:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: '@planjs/webpack-upload-loader',
            options: {
              esModule: true,
            },
          },
        ],
      },
    ],
  },
};