Skip to content

Webpack plugin to load resource from remote instead of local file system

License

Notifications You must be signed in to change notification settings

roneyrao/remote-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

remote-webpack-plugin

NPM Version Build Status codecov License

A webpack plugin to fetch dependency from internet, instead of local file system, to ensure the latest is bundled, e.g. to require an url starting with http/https/ftp: require('http://abc.com/def.gh').

If you want to load script in browser at runtime, you may need this plugin: webpack-require-http.

Features

  • HTTP, HTTPS, FTP protocols
  • Cache and offline use: if file in server has not updated yet (http/https only), or server is inaccessable, cached version is picked.

Usage

webpack.config.js

const path = require('path');
const RemotePlugin = require('remote-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'index.bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.png$/,
          loader: 'file-loader',
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
        },
      ],
    },
  plugins: [new RemotePlugin(/*options*/)],
};

index.js

import React from 'react';
import { render } from 'react-dom';
import npmjsIcon from 'https://www.npmjs.com/static/images/touch-icons/coast-228x228.png';

render(
  <div>
    <img src={npmjsIcon} />
  </div>,
  document.getElementById('root'),
);

.babelrc

{
  "presets": [
    "react"
  ]
}

output

|- dist/
|--- c426a1116301d1fd178c51522484127a.png
|--- index.bundle.js

index.bundle.js
...
(function(module, exports, __webpack_require__) {
  module.exports = __webpack_require__.p + "c426a1116301d1fd178c51522484127a.png";
})
...

Configuration

{
  cacheDir:  - where cache is placed, `__download_cache__` by default, if `false`, cache is turned off.

  http: {   - for http/https.
    'https://abc\\.com:8080/\\.*': {  - Regexp string to of specific rule matched againast whole url.
      cache:      - {bool} turn on/off cache, overriding global config.
      method,     - {string} http method.
      user,       - {string} auth user.
      password,   - {string} auth password.
      headers,    - {string} http headers.
      agent,      - {string} custom useragent.
      timeout     - {number} request timeout duration.
    }
  },

  ftp: {  - refer to: https://www.npmjs.com/package/ftp
    'ftp://abc\\.com:8080/\\.*': {  - Regexp string to test against whole url.
      cache:        - {bool} (same as above)
      secure        - {mixed} Set to true for both control and data connection encryption, 'control' for control connection encryption only, or 'implicit' for implicitly encrypted control connection (this mode is deprecated in modern times, but usually uses port 990) Default: false,
      secureOptions - {object} Additional options to be passed to tls.connect(). Default: (none),
      user          - {string} Username for authentication. Default: 'anonymous',
      password      - {string} Password for authentication. Default: 'anonymous',
      connTimeout   - {integer} How long (in milliseconds) to wait for the control connection to be established. Default: 10000,
      pasvTimeout   - {integer} How long (in milliseconds) to wait for a PASV data connection to be established. Default: 10000,
      keepalive     - {integer} How often (in milliseconds) to send a 'dummy' (NOOP) command to keep the connection alive. Default: 10000
    }
  }
}

License

MIT.

Releases

No releases published

Packages

No packages published