webpack-systemjs-export-plugin

A Webpack 2 plugin that fully integrates Webpack with SystemJS.

Install

npm i webpack-systemjs-export-plugin -S

Features

• Dynamically load your build with System.import('path/to/your/build.js), and get everything exposed by your entry module.

• Register any module you want in your build to SystemJS.

• Ignore modules that will be loadable on runtime.

• TypeScript 2 and Webpack 2 Support!

• Unit/Coverage Tests powered by Ava.

• Bundle SystemJS directly into a chunk you're exporting.

Usage

Simply include the default export of the module into your webpack plugins, and configure it with an object of this type:

type Configuration = {

  // Any external modules that will not be bundled by Webpack (defaults to none.)
  externals?: (string | RegExp)[],

  // Any node_modules you wish to expose (defaults to all of them.)
  public?: (string | RegExp)[],

  // Specify which chunks you want to wrap with SystemJS.register (defaults to none.)
  register?: {
    name : string,
    alias?: string | (chunk: string) => string
  }[],

  // Bundles SystemJS as a global dependency to the chunk of your choosing. (defaults to none.)
  bundleSystemJS?: string

}

From your entry modules, expose whatever you would like:

export * from './components';
export * from './actions';
export * from './utils';

In webpack, just add a new instance of the plugin to your plugins array:

// webpack.config.js
const WebpackSystemJSExportPlugin = require('webpack-systemjs-export-plugin');

let config = {

  entry: {
    main: './main',
    vendor: [
      'lodash'
    ],
    dynamic: './dynamic'
  },

  //...

  plugins: [
    new WebpackSystemJSExportPlugin({

      // The following dependencies are loaded from SystemJS
      externals: [],

      // Expose the following node_modules
      public: [
        'react',
        'react-dom',
        'react-router'
      ],

      // Expose following entry points to SystemJS
      register: [
        {
          // Entry Point
          name: 'main',
          // Module Name
          alias: 'myapp'
        }
      ],

      // Include SystemJS in the following entry point
      bundleSystemJS: 'vendor'
    })
    // ...
  ]
};

Check out the example project in the test suite if you're still not sure what to do.