module-webpack-plugin

a webpack plugin like html-webpack-plugin, but the template and output file is js file

install

  npm install --save module-webpack-plugin

or

  yarn add module-webpack-plugin

usage

The plugin will generate an js entry file for you that includes all your webpack bundles. Just add the plugin to your webpack config as follows:

webpack.config.js

const ModuleWebpackPlugin = require('module-webpack-plugin')

module.exports = {
  entry: 'src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  externals: {
    react: {
      root: 'React'
      commonjs: 'react'
    },
    'react-dom': {
      root: 'ReactDOM'
      commonjs: 'react-dom'
    },
    lodash: {
      root: '_'
      commonjs: 'lodash'
    }
  },
  optimization: {
    runtimeChunk: true,
  },
  plugins: [
    new ModuleWebpackPlugin()
  ]
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash',

const test = {
  dosomething() {
    console.log('dosomething', React, ReactDOM, _);
  }
}

module.exports = test;

host usage

import remote from 'module-webpack-plugin/esm/remote';
import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash',

const test = await remote('http://localhost:3000/test/index.js', {
  // regisiter externals when call reomte
  externals: {  
    react: React, 
    'react-dom': ReactDOM, 
    'lodash': _ 
  }
});

// or register externals only once
Object.assign(remote.externals, { React, ReactDOM, _ });
const test = await remote('http://localhost:3000/test/index.js');


test.dosomething();

or

import remote, { RemoteModule } from 'module-webpack-plugin/esm/remote';
import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash',

// or register externals only once
Object.assign(remote.externals, { react: React, 'react-dom': ReactDOM, 'lodash': _ });

const testModule = new RemoteModule('http://localhost:3000/test');

const testIndex = await testModule.require('index');
const testOther = await testModule.require('other');

testIndex.dosomething();
testOther.dosomething();

Options

You can pass a hash of configuration options to module-webpack-plugin. Allowed values are as follows

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |filename|{String}|'index.js'|The file to write the output entry file. Defaults to index.js. You can specify a subdirectory here too (eg: assets/admin.js)| |templateParameters|{Boolean\|Object\|Function}|| Allows to overwrite the parameters used in the template |**`hash`**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting| |**`cache`**|`{Boolean}`|`true`|Emit the file only if it was changed| |**`showErrors`**|`{Boolean}`|`true`|Errors details will be written into the HTML page| |**`chunks`**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)| |**[`chunksSortMode`](#plugins)**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}`| |**`excludeChunks`**|`{Array.<string>}`||Allows you to skip some chunks (e.g don't add the unit-test chunk)|

Here's an example webpack config illustrating how to use these options

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'assets/admin.js'
    })
  ]
}

Generating Multiple Output Entry Files

To generate more than one output entry file, declare the plugin more than once in your plugins array

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new ModuleWebpackPlugin(), // Generates default index.js
    new ModuleWebpackPlugin({  // Also generate a test.js
      filename: 'test.js',
    })
  ]
}

Filtering Chunks

To include only certain chunks you can limit the chunks being used

webpack.config.js

plugins: [
  new ModuleWebpackPlugin({
    chunks: ['app']
  })
]

It is also possible to exclude certain chunks by setting the excludeChunks option

webpack.config.js

plugins: [
  new ModuleWebpackPlugin({
    excludeChunks: [ 'dev-helper' ]
  })
]

Long Term Caching

For long term caching add contenthash/templatehash to the filename.

Example:

plugins: [
  new ModuleWebpackPlugin({
    filename: 'index.[contenthash].js'
  })
]

contenthash/templatehash is the hash of the content of the output file.

Optionally, You can configure like [<hashType>:contenthash:<digestType>:<length>]

• hashType - one of sha1, md5, sha256, sha512 or any other node.js supported hash type
• digestType - one of hex, base26, base32, base36, base49, base52, base58, base62, base64
• maxlength - maximum length of the generated hash in chars

Defaults: [md5:contenthash:hex:9999]