https://github.com/abereghici/webpack-modern-build-plugin
Plugin that creates module / nomodule scripts
https://github.com/abereghici/webpack-modern-build-plugin
es2015-modules es6 es6-modules hacktoberfest legacy modern module nomodule webpack webpack-plugin
Last synced: 4 months ago
JSON representation
Plugin that creates module / nomodule scripts
- Host: GitHub
- URL: https://github.com/abereghici/webpack-modern-build-plugin
- Owner: abereghici
- License: mit
- Created: 2020-11-28T13:30:43.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-08T07:31:52.000Z (over 4 years ago)
- Last Synced: 2025-08-18T12:55:11.136Z (10 months ago)
- Topics: es2015-modules, es6, es6-modules, hacktoberfest, legacy, modern, module, nomodule, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Webpack Modern Build Plugin
Plugin that creates module/nomodule scripts.
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](https://github.com/jantimon/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
Webpack App
;(function () {
var d = document
var c = d.createElement('script')
if (!('noModule' in c) && 'onbeforeload' in c) {
var s = !1
d.addEventListener(
'beforeload',
function (e) {
if (e.target === c) {
s = !0
} else if (!e.target.hasAttribute('nomodule') || !s) {
return
}
e.preventDefault()
},
!0,
)
c.type = 'module'
c.src = '.'
d.head.appendChild(c)
c.remove()
}
})()
```
Example
Here you can find the implementation of differential serving using this plugin
https://github.com/abereghici/diff_serving
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.