webpack-remove-empty-scripts

Webpack 5 plugin to remove empty scripts generated by usage only style in entries. This is the fork of original plugin https://github.com/fqborges/webpack-fix-style-only-entries (ver. 0.6.0).


Keywords
webpack, remove, empty, script, style, css, js
License
ISC
Install
npm install webpack-remove-empty-scripts@0.7.1

Documentation

npm version

webpack-remove-empty-scripts

The plugin remove empty scripts generated by usage only a style (css/scss/sass/less/stylus) without a js script in entry.

You can find more info by reading the following issues:

This is a fork of original plugin https://github.com/fqborges/webpack-fix-style-only-entries (ver. 0.6.0). In this fork fixed some deprecation messages and integration tests for Webpack 5. See the details in changelog.

The plugin support only Webpack 5 using new ChunkGraph and ModuleGraph APIs. For Webpack 4 use original plugin.

View on: GitHub, npmjs

How to use

Install npm install -D webpack-remove-empty-scripts.

Require and add to webpack.config plugins.

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: [
        new RemoveEmptyScriptsPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].[chunkhash:8].css',
        }),
    ],
};

Options

Name Type Default Description
verbose boolean false show logs to console
extensions Array[string] ['css', 'scss', 'sass', 'less', 'styl'] file extensions for styles
ignore string or RegExp or Array[string] or Array[RegExp] match resource path to be ignored

Example config:

// show logs to console, use it for development
new RemoveEmptyScriptsPlugin({ verbose: true })
// to identify only 'foo' and 'bar' extensions as styles
new RemoveEmptyScriptsPlugin({ extensions:['foo', 'bar'] })

Recipes

I use a javascript entry to styles:

Give an especial extension to your file (.css.js for example) and configure new RemoveEmptyScriptsPlugin({ extensions:['css.js'] }).

I use webpack-hot-middleware:

Configure this plugin as new RemoveEmptyScriptsPlugin({ ignore: 'webpack-hot-middleware' }). See: https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js