egoist / webpack-proxy

Use webpack loader with automatic dependency installation.

webpack-proxy

Install

yarn add webpack-proxy

Usage

Let's say you want to use buble-loader, you can just add it to your webpack config without installing buble-loader and buble, since webpack-proxy will handle that for you!

📝 webpack.config.js:

const proxy = require('webpack-proxy')

module.exports = {
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: proxy({
          loader: 'buble-loader',
          options: {
            // ...loader options
          }
        })
      }
    ]
  }
}

How does it work?

In:

proxy(yourLoader, options)

Out:

[
  {
    loader: require.resolve('webpack-proxy/lib/proxy-loader'),
    options: yourLoader
  },
  {
    loader: require.resolve('webpack-proxy/lib/ensure-loader'),
    options: {
      loader: yourLoader.loader,
      version: options.version,
      dependencies: options.dependencies,
      peerFilter: options.peerFilter
    }
  }
]

ensure-loader is used to install missing dependencies, proxy-loader is used to run your loader.

webpack itself will check if your loader exists before compiling, but we want to handle this ourselves via ensure-loader, which is why we use proxy-loader here.

API

proxy(UseEntry, [options])

Return an array of UseEntry.

options

version

Type: string

Set the version range of the missing loader to install.

dependencies

Type: string[]

Add extra dependencies to install alongside your loader. e.g. for sass-loader you need to add node-sass to dependencies since it's not listed as peerDependencies of sass-loader.

peerFilter

Type: (depName: string, version: string) => boolean

Filter peer dependencies, return true to include, false otherwise.

proxy.chain(Rule, UseEntry, [options])

Add UseEntry to certain webpack-chain rule.

Credits

Heavily inspired by Parcel bundler and preact-cli.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

webpack-proxy © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist · GitHub @egoist · Twitter @_egoistlily

webpack-proxy's Issues

Support webpack-chain

const jsRule = config.module.rule('js').test(/\.js$/)

proxy.chain(jsRule, {
  loader: 'babel-loader',
  options: {}
})

Manually specify dependencies to install

e.g. node-sass is not listed in sass-loader's peerDependencies but currently it's required..

proxy({
  loader: 'sass-loader'
}, {
  devDependencies: ['node-sass']
})