https://github.com/planjs/webpack-upload-loader

Webpack resource upload replacement resource path
https://github.com/planjs/webpack-upload-loader

Last synced: 23 days ago
JSON representation

Webpack resource upload replacement resource path

• Host: GitHub
• URL: https://github.com/planjs/webpack-upload-loader
• Owner: planjs
• Created: 2020-07-27T16:41:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-30T05:01:55.000Z (3 months ago)
• Last Synced: 2024-12-11T15:13:17.097Z (23 days ago)
• Language: TypeScript
• Size: 1.96 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @planjs/webpack-upload-loader

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

## Getting Started

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

```console

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

```

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

**file.js**

```js

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

```

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

**webpack.config.js**

```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`

## Options

### `esModule`

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](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).

You can enable a CommonJS module syntax using:

**webpack.config.js**

```js

module.exports = {

  module: {

    rules: [

      {

        test: /\.(png|jpe?g|gif)$/i,

        use: [

          {

            loader: '@planjs/webpack-upload-loader',

            options: {

              esModule: true,

            },

          },

        ],

      },

    ],

  },

};

```