Package Exports

webpack-remove-empty-scripts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-remove-empty-scripts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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