Skip to content

Commit 90dc75f

Browse files
webdiscuswebdiscus
committed
docs: update readme
1 parent 20f8877 commit 90dc75f

File tree

1 file changed

+115
-57
lines changed

1 file changed

+115
-57
lines changed

‎README.md

Lines changed: 115 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
[![codecov](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts/branch/master/graph/badge.svg)](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
1515
[![node](https://img.shields.io/npm/dm/webpack-remove-empty-scripts)](https://www.npmjs.com/package/webpack-remove-empty-scripts)
1616

17-
Webpack generates a js file for each resource defined in Webpack entry.\
17+
Webpack generates a JS file for each resource defined in Webpack entry.\
1818
The `mini-css-extract-plugin` extract CSS, but not eliminate a generated empty js file.\
1919
See the [mini-css-extract-plugin issue](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151).
2020
```js
@@ -24,65 +24,112 @@ module.exports = {
2424
},
2525
}
2626
```
27-
This plugin remove unexpected empty js file.
27+
This plugin removes an unexpected empty JS file.
2828

2929

3030
> **Note**
3131
>
32-
> This is improved fork of the plugin [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) v0.6.0.\
33-
> The plugin support `Webpack 5` only.
34-
> For `Webpack 4` use original [plugin](https://github.com/fqborges/webpack-fix-style-only-entries).
35-
36-
> **Warning**
37-
>
38-
> Version `1.0.0` might introduce a possible `BREAKING CHANGE`.\
39-
> In this version was reverted defaults behavior as in `v0.8.1` - remove empty scripts `before` processing other plugins.
40-
>
41-
> **Migration to v1.0.0**
42-
>
43-
> When update from `<= v0.8.1`, nothing needs to be done.\
44-
> When update from `v0.8.2 - v0.8.4`, if you have an issue, try to use new `stage` option with `RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS` value.
32+
> This plugin is compatible with `Webpack 5` only. For `Webpack 4` use [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries).
4533
4634
---
4735

48-
## Usage with Pug
36+
## Usage with `html-webpack-plugin`
4937

50-
If you use Pug with this plugin, then you should use the [pug-plugin](https://github.com/webdiscus/pug-plugin).<br>
51-
Pug plugin enable to define Pug files in Webpack entry, extract JS and CSS from their sources used in Pug.
38+
💡 It is recommended to use the new powerful [html-bundler-webpack-plugin][html-bundler-webpack-plugin].\
39+
This plugin replaces the functionality of `html-webpack-plugin`, `mini-css-extract-plugin` and **doesn't generate unexpected empty JS files**.
40+
41+
The HTML Bundler Plugin automatically extracts JS, CSS, images, fonts from their sources loaded directly in HTML.
42+
The generated HTML contains output hashed filenames of processed source files.
43+
The plugin allow to use an HTML file or a template as an entry point in Webpack.
44+
45+
### Simple usage example
5246

53-
Define Pug files in Webpack entry:
47+
The source _index.html_
48+
```html
49+
<html>
50+
<head>
51+
<!-- load source style -->
52+
<link href="./style.scss" rel="stylesheet">
53+
<!-- load source script -->
54+
<script src="./main.js" defer="defer"></script>
55+
</head>
56+
<body>
57+
<h1>Hello World!</h1>
58+
<!-- load image from source directory -->
59+
<img src="./image.png">
60+
</body>
61+
</html>
62+
```
63+
64+
The generated HTML
65+
```html
66+
<html>
67+
<head>
68+
<link href="/assets/css/style.05e4dd86.css" rel="stylesheet">
69+
<script src="/assets/js/main.f4b855d8.js" defer="defer"></script>
70+
</head>
71+
<body>
72+
<h1>Hello World!</h1>
73+
<img src="/assets/img/image.f47ad56f.png">
74+
</body>
75+
</html>
76+
```
77+
78+
Simple Webpack config
5479
```js
55-
const PugPlugin = require('pug-plugin');
80+
const path = require('path');
81+
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
5682
module.exports = {
83+
output: {
84+
path: path.join(__dirname, 'dist/'),
85+
},
5786
entry: {
58-
// all script and style sources can be defined directly in Pug
59-
index: './src/views/index.pug', // => dist/index.html
87+
// define templates here
88+
index: './src/views/index.html', // => dist/index.html
89+
'pages/about': './src/views/about/index.html', // => dist/pages/about.html
90+
// ...
6091
},
6192
plugins: [
62-
// enable using Pug files in Webpack entry
63-
new PugPlugin({
64-
// extract CSS from style sources defined in Pug
65-
extractCss: {
93+
new HtmlBundlerPlugin({
94+
js: {
95+
// output filename of extracted JS from source script loaded in HTML via `<script>` tag
96+
filename: 'assets/js/[name].[contenthash:8].js',
97+
},
98+
css: {
99+
// output filename of extracted CSS from source style loaded in HTML via `<link>` tag
66100
filename: 'assets/css/[name].[contenthash:8].css',
67101
},
68102
}),
69103
],
104+
module: {
105+
rules: [
106+
// templates
107+
{
108+
test: /\.html$/,
109+
loader: HtmlBundlerPlugin.loader, // HTML loader
110+
},
111+
// styles
112+
{
113+
test: /\.(css|sass|scss)$/,
114+
use: ['css-loader', 'sass-loader'],
115+
},
116+
// images
117+
{
118+
test: /\.(png|jpe?g)/,
119+
type: 'asset/resource',
120+
generator: {
121+
filename: 'assets/img/[name].[hash:8][ext]',
122+
},
123+
},
124+
],
125+
},
70126
};
71127
```
72128

73-
Use source files of styles and scripts directly in Pug:
74-
```pug
75-
link(href=require('./styles.scss') rel='stylesheet')
76-
script(src=require('./main.js'))
77-
```
78-
79-
Generated HTML contains hashed CSS and JS output filenames:
80-
```html
81-
<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
82-
<script src="/assets/js/main.f4b855d8.js"></script>
83-
```
129+
## Usage with Pug
84130

85-
The single `pug-plugin` replaces the functionality of `html-webpack-plugin` `mini-css-extract-plugin` `webpack-remove-empty-scripts` and `pug-loader`.
131+
If you use Pug with this plugin, then you should use the [pug-plugin](https://github.com/webdiscus/pug-plugin).<br>
132+
The Pug plugin works like [html-bundler-webpack-plugin][html-bundler-webpack-plugin] but for Pug templates.
86133

87134
---
88135

@@ -121,6 +168,7 @@ module.exports = {
121168
],
122169
};
123170
```
171+
---
124172

125173
## Options
126174

@@ -261,61 +309,70 @@ new RemoveEmptyScriptsPlugin({
261309
## Who use this plugin
262310

263311
<a href='https://github.com/mozilla'>
264-
<img src='https://avatars.githubusercontent.com/u/131524?s=42&v=4'>
312+
<img src='https://avatars.githubusercontent.com/u/131524?s=42&v=4' title='mozilla'>
313+
</a>
314+
<a href='https://github.com/pypi/warehouse'>
315+
<img src="https://avatars.githubusercontent.com/u/2964877?s=42&v=4" title='pypi'>
316+
</a>
317+
<a href='https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md'>
318+
<img src="https://avatars.githubusercontent.com/u/4223?s=42&v=4" title='rails'>
319+
</a>
320+
<a href='https://www.cisco.com/c/dam/en_us/about/doing_business/open_source/docs/slido-test-2206-1655452418.pdf'>
321+
<img src='https://avatars.githubusercontent.com/u/1376999?s=42&v=4' title='cisco'>
265322
</a>
266323
<a href='https://github.com/jenkinsci'>
267-
<img src='https://avatars.githubusercontent.com/u/107424?s=42&v=4'>
324+
<img src='https://avatars.githubusercontent.com/u/107424?s=42&v=4' title='Jenkins'>
268325
</a>
269326
<a href='https://github.com/coinbase'>
270-
<img src='https://avatars.githubusercontent.com/u/1885080?s=42&v=4'>
327+
<img src='https://avatars.githubusercontent.com/u/1885080?s=42&v=4' title='coinbase'>
271328
</a>
272329
<a href='https://github.com/PrestaShop'>
273-
<img src='https://avatars.githubusercontent.com/u/2815696?s=42&v=4'>
330+
<img src='https://avatars.githubusercontent.com/u/2815696?s=42&v=4' title='PrestaShop'>
274331
</a>
275332
<a href='https://github.com/getsentry'>
276-
<img src='https://avatars.githubusercontent.com/u/1396951?s=42&v=4'>
333+
<img src='https://avatars.githubusercontent.com/u/1396951?s=42&v=4' title='Sentry'>
277334
</a>
278335
<a href='https://github.com/standardnotes'>
279-
<img src='https://avatars.githubusercontent.com/u/24537496?s=42&v=4'>
336+
<img src='https://avatars.githubusercontent.com/u/24537496?s=42&v=4' title='Standard Notes'>
280337
</a>
281338
<a href='https://github.com/woocommerce'>
282-
<img src='https://avatars.githubusercontent.com/u/473596?s=42&v=4'>
339+
<img src='https://avatars.githubusercontent.com/u/473596?s=42&v=4' title='woocommerce'>
283340
</a>
284341
<a href='https://github.com/roots'>
285-
<img src='https://avatars.githubusercontent.com/u/4986074?s=42&v=4'>
342+
<img src='https://avatars.githubusercontent.com/u/4986074?s=42&v=4' title='Roots'>
286343
</a>
287344
<a href='https://github.com/ampproject'>
288-
<img src='https://avatars.githubusercontent.com/u/14114390?s=42&v=4'>
345+
<img src='https://avatars.githubusercontent.com/u/14114390?s=42&v=4' title='AMP'>
289346
</a>
290347
<a href='https://github.com/awesomemotive'>
291-
<img src='https://avatars.githubusercontent.com/u/8514352?s=42&v=4'>
348+
<img src='https://avatars.githubusercontent.com/u/8514352?s=42&v=4' title='Awesome Motive'>
292349
</a>
293350
<a href='https://github.com/10up'>
294-
<img src='https://avatars.githubusercontent.com/u/3358927?s=42&v=4'>
351+
<img src='https://avatars.githubusercontent.com/u/3358927?s=42&v=4' title='10up'>
295352
</a>
296353
<a href='https://github.com/collab-project'>
297-
<img src='https://avatars.githubusercontent.com/u/347599?s=42&v=4'>
354+
<img src='https://avatars.githubusercontent.com/u/347599?s=42&v=4' title='Collab project'>
298355
</a>
299356
<a href='https://github.com/jspsych'>
300-
<img src='https://avatars.githubusercontent.com/u/16901698?s=42&v=4'>
357+
<img src='https://avatars.githubusercontent.com/u/16901698?s=42&v=4' title='jsPsych'>
301358
</a>
302359
<a href='https://github.com/grandnode'>
303-
<img src='https://avatars.githubusercontent.com/u/16118376?s=42&v=4'>
360+
<img src='https://avatars.githubusercontent.com/u/16118376?s=42&v=4' title='GrandNode'>
304361
</a>
305362
<a href='https://github.com/TheOdinProject'>
306-
<img src='https://avatars.githubusercontent.com/u/4441966?s=42&v=4'>
363+
<img src='https://avatars.githubusercontent.com/u/4441966?s=42&v=4' title='The Odin Project'>
307364
</a>
308365
<a href='https://github.com/helsingborg-stad'>
309-
<img src='https://avatars.githubusercontent.com/u/12846276?s=42&v=4'>
366+
<img src='https://avatars.githubusercontent.com/u/12846276?s=42&v=4' title='Helsingborg Stad'>
310367
</a>
311368
<a href='https://github.com/City-of-Helsinki'>
312-
<img src='https://avatars.githubusercontent.com/u/1875564?s=42&v=4'>
369+
<img src='https://avatars.githubusercontent.com/u/1875564?s=42&v=4' title='City of Helsinki'>
313370
</a>
314371

315372
## Also See
316373

317-
- more examples of usages see in [test cases](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/master/test/cases)
318-
- [ansis][ansis] - Formatting text in terminal with ANSI colors & styles.
374+
- [ansis][ansis] - The Node.js library for ANSI color styling of text in terminal.
375+
- [html-bundler-webpack-plugin][html-bundler-webpack-plugin] - The plugin handles HTML files from entry, extracts CSS, JS, images files from their sources used in HTML.
319376
- [pug-plugin][pug-plugin] - plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.
320377
- [pug-loader][pug-loader] - loader for Webpack renders Pug to HTML or template function. Optimized for using with Vue.
321378

@@ -326,4 +383,5 @@ new RemoveEmptyScriptsPlugin({
326383
[ansis]: https://github.com/webdiscus/ansis
327384
[pug-plugin]: https://github.com/webdiscus/pug-plugin
328385
[pug-loader]: https://github.com/webdiscus/pug-loader
386+
[html-bundler-webpack-plugin]: https://github.com/webdiscus/html-bundler-webpack-plugin
329387
<!-- prettier-ignore-end -->

0 commit comments

Comments
 (0)