Install

``bash
npm i --save-dev webpack-modern-build-plugin
`

`bash
yarn add --dev webpack-modern-build-plugin
`

Usage

The plugin generates module/nomodule scripts and relies on html-webpack-plugin. This plugin expects to return two configurations in your webpack - legacy and modern.
One of those values should be passed as mode option to the plugin in both configurations.

Example of webpack config:

webpack.config.js

`js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackModernBuildPlugin = require("webpack-modern-build-plugin");

module.exports = [
{
entry: "index.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js",
},
plugins: [
new HtmlWebpackPlugin(),
new WebpackModernBuildPlugin({
mode: "modern",
}),
]
},
{
entry: "index.js",
output: {
path: __dirname + "/dist",
filename: "es5.bundle.js",
},
plugins: [
new HtmlWebpackPlugin(),
new WebpackModernBuildPlugin({
mode: "legacy",
}),
],
}
];
`

This will generate a file dist/index.html containing the following

`html












`

Example

The script in the middle between type="module" and nomodule is for Safari 10.1. This version supports modules, but does not support the nomodule` attribute - it will load "script nomodule" anyway. This snippet solve this problem, but only for script tags that load external code.