module-webpack-plugin
a webpack plugin like html-webpack-plugin, but the template and output file is js file
Last updated 8 months ago by gxlmyacc .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install module-webpack-plugin 
SYNC missed versions from official npm registry.

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, ReactDOM, _ }
});

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


test.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 {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]

Current Tags

  • 0.0.5                                ...           latest (8 months ago)

5 Versions

  • 0.0.5                                ...           8 months ago
  • 0.0.4                                ...           10 months ago
  • 0.0.3                                ...           10 months ago
  • 0.0.2                                ...           10 months ago
  • 0.0.1                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |