Webpack Syntax Resolver Plugin

Why

This automates resolving the plugin on a more modern syntax field, this field is derived from the package.json.

Example: pkg X would normally be imported as an ES5 module, this plugin sees that pkg X exports a more modern ES6 bundle because syntax.esmodule leads to that bundle. Then this package will rewrite this resolver call to use the modern lib instead.

Caution: not all browsers support ES6 features, this lib is intended to be used with a module nomodule build

How to use

const syntaxResolverPlugin = require('webpack-syntax-resolver-plugin');
 
{
  ...webpackConfig,
  resolve: {
    plugins: [new ModernResolutionPlugin()],
  },
}
 

And let it to the magic, if you find a package that is causing issues you can ignore it by passing an option to this plugin named: ignoredModules, this expects an array.

The rest will be handled for you!

Example

https://github.com/JoviDeCroock/POC-ModularLegacyBuild

Only one package at this time supports this but there are more to come hooked-form

Installation

npm install --save-dev webpack-syntax-resolver-plugin