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:

• https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518
• https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151

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

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