static-import-webpack-plugin

Duck taped solution to move static imports in webpack bundle to top level by using special comment /* webpackIgnore: true */.
With combination esm-webpack-plugin allow to generate EcmaScript module.
See example at https://github.com/unlight/webhive/tree/microfrontend/src/webhive.frontend

Install

npm install --save-dev static-import-webpack-plugin

Usage

Webpack Config

const StaticImportWebpackPlugin = require('static-import-webpack-plugin');
// Add to plugins array
plugins: [
    new StaticImportWebpackPlugin(),
],
// Other config settings
entry: './src/entry.js',
output: {
    libraryTarget: 'var',
    library: '$lib',
}

Code

// /src/unicorn.js
export default 'unicorn'

// /src/entry.js
import pokemon /* webpackIgnore: true */ from './pokemon';
import unicorn from './unicorn';

Output

import pokemon from './pokemon';
var $lib = ... // webpackBootstrap + bundled unicorn

Related Projects

• https://github.com/purtuga/esm-webpack-plugin

Development

Example

npx ts-node node_modules/webpack/bin/webpack.js --config example/webpack.config.js

node --inspect-brk c:/nodejs/node_modules/ts-node/dist/bin.js node_modules/webpack/bin/webpack.js --config example/webpack.config.js