Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@webdiscus
webdiscus committed Jan 23, 2023
1 parent 20f8877 commit 90dc75f
Showing 1 changed file with 115 additions and 57 deletions.
172 changes: 115 additions & 57 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
[![codecov](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts/branch/master/graph/badge.svg)](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
[![node](https://img.shields.io/npm/dm/webpack-remove-empty-scripts)](https://www.npmjs.com/package/webpack-remove-empty-scripts)

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


> **Note**
>
> This is improved fork of the plugin [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) v0.6.0.\
> The plugin support `Webpack 5` only.
> For `Webpack 4` use original [plugin](https://github.com/fqborges/webpack-fix-style-only-entries).
> **Warning**
>
> Version `1.0.0` might introduce a possible `BREAKING CHANGE`.\
> In this version was reverted defaults behavior as in `v0.8.1` - remove empty scripts `before` processing other plugins.
>
> **Migration to v1.0.0**
>
> When update from `<= v0.8.1`, nothing needs to be done.\
> 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.
> 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).
---

## Usage with Pug
## Usage with `html-webpack-plugin`

If you use Pug with this plugin, then you should use the [pug-plugin](https://github.com/webdiscus/pug-plugin).<br>
Pug plugin enable to define Pug files in Webpack entry, extract JS and CSS from their sources used in Pug.
💡 It is recommended to use the new powerful [html-bundler-webpack-plugin][html-bundler-webpack-plugin].\
This plugin replaces the functionality of `html-webpack-plugin`, `mini-css-extract-plugin` and **doesn't generate unexpected empty JS files**.

The HTML Bundler Plugin automatically extracts JS, CSS, images, fonts from their sources loaded directly in HTML.
The generated HTML contains output hashed filenames of processed source files.
The plugin allow to use an HTML file or a template as an entry point in Webpack.

### Simple usage example

Define Pug files in Webpack entry:
The source _index.html_
```html
<html>
<head>
<!-- load source style -->
<link href="./style.scss" rel="stylesheet">
<!-- load source script -->
<script src="./main.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<!-- load image from source directory -->
<img src="./image.png">
</body>
</html>
```

The generated HTML
```html
<html>
<head>
<link href="/assets/css/style.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<img src="/assets/img/image.f47ad56f.png">
</body>
</html>
```

Simple Webpack config
```js
const PugPlugin = require('pug-plugin');
const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
output: {
path: path.join(__dirname, 'dist/'),
},
entry: {
// all script and style sources can be defined directly in Pug
index: './src/views/index.pug', // => dist/index.html
// define templates here
index: './src/views/index.html', // => dist/index.html
'pages/about': './src/views/about/index.html', // => dist/pages/about.html
// ...
},
plugins: [
// enable using Pug files in Webpack entry
new PugPlugin({
// extract CSS from style sources defined in Pug
extractCss: {
new HtmlBundlerPlugin({
js: {
// output filename of extracted JS from source script loaded in HTML via `<script>` tag
filename: 'assets/js/[name].[contenthash:8].js',
},
css: {
// output filename of extracted CSS from source style loaded in HTML via `<link>` tag
filename: 'assets/css/[name].[contenthash:8].css',
},
}),
],
module: {
rules: [
// templates
{
test: /\.html$/,
loader: HtmlBundlerPlugin.loader, // HTML loader
},
// styles
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader'],
},
// images
{
test: /\.(png|jpe?g)/,
type: 'asset/resource',
generator: {
filename: 'assets/img/[name].[hash:8][ext]',
},
},
],
},
};
```

Use source files of styles and scripts directly in Pug:
```pug
link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))
```

Generated HTML contains hashed CSS and JS output filenames:
```html
<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>
```
## Usage with Pug

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

---

Expand Down Expand Up @@ -121,6 +168,7 @@ module.exports = {
],
};
```
---

## Options

Expand Down Expand Up @@ -261,61 +309,70 @@ new RemoveEmptyScriptsPlugin({
## Who use this plugin

<a href='https://github.com/mozilla'>
<img src='https://avatars.githubusercontent.com/u/131524?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/131524?s=42&v=4' title='mozilla'>
</a>
<a href='https://github.com/pypi/warehouse'>
<img src="https://avatars.githubusercontent.com/u/2964877?s=42&v=4" title='pypi'>
</a>
<a href='https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md'>
<img src="https://avatars.githubusercontent.com/u/4223?s=42&v=4" title='rails'>
</a>
<a href='https://www.cisco.com/c/dam/en_us/about/doing_business/open_source/docs/slido-test-2206-1655452418.pdf'>
<img src='https://avatars.githubusercontent.com/u/1376999?s=42&v=4' title='cisco'>
</a>
<a href='https://github.com/jenkinsci'>
<img src='https://avatars.githubusercontent.com/u/107424?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/107424?s=42&v=4' title='Jenkins'>
</a>
<a href='https://github.com/coinbase'>
<img src='https://avatars.githubusercontent.com/u/1885080?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/1885080?s=42&v=4' title='coinbase'>
</a>
<a href='https://github.com/PrestaShop'>
<img src='https://avatars.githubusercontent.com/u/2815696?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/2815696?s=42&v=4' title='PrestaShop'>
</a>
<a href='https://github.com/getsentry'>
<img src='https://avatars.githubusercontent.com/u/1396951?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/1396951?s=42&v=4' title='Sentry'>
</a>
<a href='https://github.com/standardnotes'>
<img src='https://avatars.githubusercontent.com/u/24537496?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/24537496?s=42&v=4' title='Standard Notes'>
</a>
<a href='https://github.com/woocommerce'>
<img src='https://avatars.githubusercontent.com/u/473596?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/473596?s=42&v=4' title='woocommerce'>
</a>
<a href='https://github.com/roots'>
<img src='https://avatars.githubusercontent.com/u/4986074?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/4986074?s=42&v=4' title='Roots'>
</a>
<a href='https://github.com/ampproject'>
<img src='https://avatars.githubusercontent.com/u/14114390?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/14114390?s=42&v=4' title='AMP'>
</a>
<a href='https://github.com/awesomemotive'>
<img src='https://avatars.githubusercontent.com/u/8514352?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/8514352?s=42&v=4' title='Awesome Motive'>
</a>
<a href='https://github.com/10up'>
<img src='https://avatars.githubusercontent.com/u/3358927?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/3358927?s=42&v=4' title='10up'>
</a>
<a href='https://github.com/collab-project'>
<img src='https://avatars.githubusercontent.com/u/347599?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/347599?s=42&v=4' title='Collab project'>
</a>
<a href='https://github.com/jspsych'>
<img src='https://avatars.githubusercontent.com/u/16901698?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/16901698?s=42&v=4' title='jsPsych'>
</a>
<a href='https://github.com/grandnode'>
<img src='https://avatars.githubusercontent.com/u/16118376?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/16118376?s=42&v=4' title='GrandNode'>
</a>
<a href='https://github.com/TheOdinProject'>
<img src='https://avatars.githubusercontent.com/u/4441966?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/4441966?s=42&v=4' title='The Odin Project'>
</a>
<a href='https://github.com/helsingborg-stad'>
<img src='https://avatars.githubusercontent.com/u/12846276?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/12846276?s=42&v=4' title='Helsingborg Stad'>
</a>
<a href='https://github.com/City-of-Helsinki'>
<img src='https://avatars.githubusercontent.com/u/1875564?s=42&v=4'>
<img src='https://avatars.githubusercontent.com/u/1875564?s=42&v=4' title='City of Helsinki'>
</a>

## Also See

- more examples of usages see in [test cases](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/master/test/cases)
- [ansis][ansis] - Formatting text in terminal with ANSI colors & styles.
- [ansis][ansis] - The Node.js library for ANSI color styling of text in terminal.
- [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.
- [pug-plugin][pug-plugin] - plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.
- [pug-loader][pug-loader] - loader for Webpack renders Pug to HTML or template function. Optimized for using with Vue.

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

0 comments on commit 90dc75f

Please sign in to comment.