webpack-external-plugin

webpack external deps load plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
webpack-external-plugin
7161.1.36 months ago5 years agoMinified + gzip package size for webpack-external-plugin in KB

Popular Searches

Readme

webpack-external-plugin
plugin for load bundles and externals

Install

npm i --save-dev webpack-external-plugin
yarn add --dev webpack-external-plugin

This is a webpack plugin that create a script to load all the chunks and externals to html.
Chunks generated by webpack and externals would load according to the calling order.

Usage

The plugin will generate a js file for you that includes all the public path of your webpack bundles and externals. Just add the plugin to your webpack config as follow:
webpack.config.js
module.exports = {
  entry: 'index.jsx',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js',
    publicPath: '/',
  },
  plugins: [
    new WebpackExternalPlugin()
  ],
  externals: {
    react: 'React',
    'react-dom': 'react-dom'
  }
}
This will generate a file dist/load-main.js to load all the files.
If you have multiple webpack entry points, each one would have a corresponding file called load-[name].js, includes the entry point and externals in the entry.
If there are css files output, they will be added to the generated load files as well.
Actually, all the generated chunks whose filename not end with .map would be added to load files.
The plugin is only suggested to use with production env

Use with html-webpack-plugin

If you want to use with html-webpack-plugin, there is nothing else need to do.
module.exports = {
  ...,
  plugins: [
      new WebpackExternalPlugin(),
      new HtmlWebpackPlugin()
  ],
}
``` 

The html file would be like:
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="load-index_bundle.js"></script>
  </body>
</html>

Options

You can pass a hash of configuration options to webpack-external-plugin. Allowed values are as follows
|Name|Type|Default|Description| |:---:|:---:|:-----:|:----------| | filename | {String} | load-[name].js | The file to write the generated code to. Defaults to load-[name].js like load-main.js. | | externals() | {String[]} | [] | Array of file path you want to load external, like external stylesheets | | cdnPath() | {String|Function} | https://unpkg.com/[package]@[version] | The path template or function to generate public path of externals | | hash() | {Boolean} | true | Add hash to chunk path(not for externals) |

Specify filename

The plugin will output file to load-[name].js default, like load-main.js.
You can specify a name with params like [name].js, [id].js or [hash].js.
Do not make the loader filename same as the bundle out name.
For example, webpack.output.name is '[name].js',
and webpack-external-plugin.options.filename is '[name].js' as well

Specify cdnPath

You can specify cdn path for external package as follow
options.cdnPath accept string|Function
// https://unpkg.com/[package]@[version]
lodash@4.1.0 => https://unpkg.com/lodash@4.1.0

The string type url accept package and version as params, webpack-external-plugin will resolve the node_modules to get installed version of the dependencies.
Sometimes you want to set different path for packages
For example: react 
const list = {
  react: 'https://unpkg.com/react@16.4.2/umd/react.production.min.js',
  'react-dom': 'https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js'
}
options.cdnPath = (package, version)=> {
  return list[package];
}