webpack-external-plugin

    1.1.1 • Public • Published

    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:

    <!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]
    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];
    }
    

    Install

    npm i webpack-external-plugin

    DownloadsWeekly Downloads

    206

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    93.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • yeliex