Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webdiscus/webpack-remove-empty-scripts
Webpack plugin to remove empty scripts generated by usage only a style without JS in entry.
https://github.com/webdiscus/webpack-remove-empty-scripts
css entity entrypoint js mini-css-extract-plugin plugin script style webpack
Last synced: 2 days ago
JSON representation
Webpack plugin to remove empty scripts generated by usage only a style without JS in entry.
- Host: GitHub
- URL: https://github.com/webdiscus/webpack-remove-empty-scripts
- Owner: webdiscus
- License: isc
- Created: 2020-10-22T18:18:27.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-18T16:18:10.000Z (10 months ago)
- Last Synced: 2024-11-10T20:19:38.255Z (3 days ago)
- Topics: css, entity, entrypoint, js, mini-css-extract-plugin, plugin, script, style, webpack
- Language: JavaScript
- Homepage:
- Size: 825 KB
- Stars: 105
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
webpack-remove-empty-scripts
The Webpack plugin removes empty JavaScript files generated when using styles.
---
[](https://www.npmjs.com/package/webpack-remove-empty-scripts "download npm package")
[](https://nodejs.org)
[](https://webpack.js.org/)
[](https://github.com/webdiscus/webpack-remove-empty-scripts/actions/workflows/test.yml)
[](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
[](https://www.npmjs.com/package/webpack-remove-empty-scripts)
## The problem this plugin solves
Webpack generates a JS file for each resource defined in the entry option.
For example, you have a style file in the `entry` option:
```js
module.exports = {
entry: {
styles: './styles.scss',
},
}
```
The following files are generated in the output directory:
```
dist/styles.css
dist/styles.js // <= unexpected empty JS file
```
This plugin removes generated empty JS files.
> **Warning**
>
> This plugin is the `Crutch` 🩼 for the [mini-css-extract-plugin issue](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151).\
> The `mini-css-extract-plugin` extract CSS, but not eliminate a generated empty JS file.
>
> **Note**
>
> This plugin is compatible with `Webpack 5`. For `Webpack 4` use [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries).
## Install
```console
npm install webpack-remove-empty-scripts --save-dev
```
## Usage with mini-css-extract-plugin
The example of webpack.config.js:
```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
entry: {
'main' : './app/main.js',
'styles': ['./common/styles.css', './app/styles.css']
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
},
]
},
plugins: [
// removes the empty `.js` files generated by webpack
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
],
};
```
See the [plugin options](#options).
---
## Usage with html-webpack-plugin
> ✅ It is recommended to use the new powerful [html-bundler-webpack-plugin][html-bundler-webpack-plugin] instead of:
>
> - html-webpack-plugin
> - mini-css-extract-plugin
> - webpack-remove-empty-scripts
### Highlights of html-bundler-webpack-plugin
- **Prevents generating unexpected empty JS files.**
- An [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry) can be an HTML template.
- Source **scripts** and **styles** can be specified directly in HTML using `` and `<link>`.
- Extracts JS and CSS from their sources specified in HTML.
- Resolving [source](https://github.com/webdiscus/html-bundler-webpack-plugin#loader-option-sources) assets specified in standard attributes `href` `src` `srcset` etc.
- Inline [JS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-js), [CSS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-css), [SVG](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-image), [PNG](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-image) without additional plugins and loaders.
- Support for [template engines](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-template-engine) such as Eta, EJS, Handlebars, Nunjucks, LiquidJS and others.
### Simple usage example
Add source scripts and styles directly to HTML:
```html
<html>
<head>
<!-- specify source styles -->
<link href="./style.scss" rel="stylesheet">
<!-- specify source scripts here and/or in body -->
<script src="./main.js" defer="defer">
Hello World!
Hello World!
