external url in webpack alias

Question

My team moved all the images of company website into a CDN. (https://cdn.irobo.co.kr/images) However, I'd like to use those images without changing current code base, which has a lot of: (reactjs code)

<image src={require('img/common/logo.jpg')} />

here's the webpack config for the website:

{
  module: {
    loaders:[{
      test: /\.(png|jpg)$/,
      loader: 'file-loader?name=[name].[ext]',
    }],
  }
  ...
  resolve: {
    alias: {
      img: path.join(srcPath, 'app/img'),
    }
  }
}

Here's what I tried:

...
  resolve: {
    alias: {
      img: 'https://cdn.irobo.co.kr/images',
    }
  }
}

Webpack compiles the code. While compiling it transforms images, what you want to use is link to images. And download when ui loads. It can be achieved by <img src={cdn.irobo.co.kr/images/${path}}/> Wild idea : you can write a img loader, that just replaces the image urls. — Umang Gupta
– Umang Gupta, Commented Feb 7, 2017 at 7:31

therewillbecode · Accepted Answer · 2017-02-07 10:32:07Z

Bundling assets from external urls with Webpack

The url-loader plugin for webpack gives you the ability to take use assets from external url by encoding them in base64.

The url loader works like the file loader, but can return a Data Url if the file is smaller than a byte limit.

The limit can be specified with a query parameter. (Defaults to no limit)

Remember to install the url-loader plugin as a project dependency.

npm install --save-dev url-loader

Configure the url-loader plugin

Here is a sample webpack config to set up the url-loader plugin.

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    path: './build', // This is where the images and js will go
    publicPath: 'http://mycdn.com/', // used to generate URLs to e.g. images
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      // use ! to chain loaders
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      // inline base64 URLs for <=8k images, direct URLs for the rest
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }
};

Import the assets in your app

app.jsx

import image from '../build/image.jpg';

<img src={image} />

Collectives™ on Stack Overflow

external url in webpack alias

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related