# webpack-module-nomodule-plugin

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

Latest version **1.1.1** (published 2021-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-module-nomodule-plugin
pnpm add webpack-module-nomodule-plugin
yarn add webpack-module-nomodule-plugin
bun add webpack-module-nomodule-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-07-24 |
| First published | 2019-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.9 |
| Dependencies | 1 |
| Unpacked size | 180.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jovi De Croock |
| Maintainers | jdecroock |
| Keywords | webpack, plugin, module, nomodule, html-webpack-plugin, module-nomodule |

## Links

- npm: https://www.npmjs.com/package/webpack-module-nomodule-plugin
- Repository: https://github.com/jovidecroock/webpack-module-nomodule-plugin
- Issues: https://github.com/jovidecroock/webpack-module-nomodule-plugin/issues
- npm.io page: https://npm.io/package/webpack-module-nomodule-plugin

## Dependencies (1)

- [fs-extra](https://npm.io/package/fs-extra.md) 9.0.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2021-07-24
- 1.1.0 — 2021-07-12
- 1.0.1 — 2020-10-16
- 1.0.0 — 2020-10-11
- 0.4.0 — 2020-04-25
- 0.3.1 — 2020-03-17
- 0.3.0 — 2020-03-11
- 0.2.1 — 2020-01-03
- 0.2.0 — 2019-11-18
- 0.1.0 — 2019-03-27
- 0.0.5 — 2019-03-23
- 0.0.4 — 2019-03-22
- 0.0.3 — 2019-03-19
- 0.0.2 — 2019-03-19
- 0.0.1 — 2019-03-19

## README

# Webpack module-nomodule plugin

[![npm version](https://badgen.net/npm/v/webpack-module-nomodule-plugin)](https://www.npmjs.com/package/webpack-module-nomodule-plugin)


## 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](https://github.com/jantimon/html-webpack-plugin).

[module-nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) explained.

## How to use

1. Create separate build steps for your modern and legacy builds in your webpack config.  
1. Each build step should include at least one use of the `html-webpack-plugin` with the `inject: 'body'` option set.
1. 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](./assets/efficient_mode.jpg)

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](./assets/minimal.png)

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](https://github.com/GoogleChromeLabs/native-url) in modern browsers, ...

---
_Source: https://npm.io/package/webpack-module-nomodule-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._