New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

webpack-module-nomodule-plugin

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-module-nomodule-plugin

Automates the integration of module/nomodule bundles in your html.

  • 1.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Webpack module-nomodule plugin

npm version

Installation

npm install --save-dev webpack-module-nomodule-plugin

or

yarn add -D webpack-module-nomodule-plugin

Why

This automates the generation of module-nomodule scripts.

This project relies on html-webpack-plugin.

module-nomodule explained.

How to use

  1. Create separate build steps for your modern and legacy builds in your webpack config.
  2. Each build step should include at least one use of the html-webpack-plugin with the inject: 'body' option set.
  3. Include this plugin with the name of the configuration in the constructor (e.g. new WebpackModuleNomodulePlugin('legacy'); or new WebpackModuleNomodulePlugin('modern');)

The rest will be handled for you!

Output modes

The second argument to WebpackModuleNomodulePlugin allows you to specify an output mode.

At this point there are two:

  • efficient (default)
  • minimal

These are exported as an object containing OUTPUT_MODES.

Efficient

Ensures IE11 and some Edge versions won't double download the contents of your scripts. This adds some more size to your html file and defers the loading of scripts.

This will look something like this:

efficient mode output

What happens in this picture?

  • We declare the modern javascript files as modulepreload to shave a bit off the load/parse time of these
  • We dynamically inject the entry-modules with the bigger script to avoid injecting needlessly

Minimal

Makes the most minimal output possible, this will be downloaded twice on older Edge and IE11.

This will look something like this:

minimal mode output

The script in the middle between type="module" and nomodule is meant for safari 11 compat.

nomodule will load for browsers who don't support module and the other way around, the problem with this approach is we'll be downloading both bundles on certain Edge versions and IE11.

Example

https://github.com/JoviDeCroock/POC-ModularLegacyBuild

This example uses multiple techniques to guarantee the best size, like using native-url in modern browsers, ...

Keywords

FAQs

Package last updated on 24 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc