webpack-remove-empty-scripts

The plugin removes empty js scripts generated when using only the styles like css scss sass less stylus in the webpack entry.

This is improved fork of original plugin webpack-fix-style-only-entries ver. 0.6.0.
This fork fixes some deprecation messages and some issues in React. See the details in changelog.

The plugin support only Webpack 5. For Webpack 4 use original plugin.

Description of the problem

By definition a file in webpack entry different from .js will be generated via a webpack loader the .js file to handle it in others loaders or plugins. The generated .js file is the "temporary container" between handlers (loaders, plugins) in webpack. An end handler should take care of eliminating this temporary .js file after the processing of the resource from entry. But the mini-css-extract-plugin not do it.
This plugin detect and delete this temporary .js files.

module.exports = {
  entry: {
    main: './main.js', // the generated `main.js` is what we expect
    styles: './main.scss', // will be generated the expected `styles.css` and the unexpected `styles.js`
  },
  // ...
}

You can find more info by 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

NEW

The experimental version ^0.8.0 has new improved and fast algorithm to detect generated needless empty js files.
Please test your project before using it in production.
If you have a problem with the new version, please create a new issue.

⚠️ The last stable release is the version 0.7.1

Propose

If you use the mini-css-extract-plugin only to extract css files from styles defined in webpack entry like scss sass less stylus then try to use new entry extract plugin - pug-plugin.

The pug-plugin extract HTML and CSS from pug html css scss sass less stylus files defined by webpack entry into output directory.
The pug-plugin doesn't need any fix plugins like webpack-remove-empty-scripts, because it doesn't generate empty js files.
The pug-plugin is very flexible and fast.
Improve performance with pug-plugin. Using the pug-plugin and pug html scss etc. assets in the webpack entry no longer requires additional plugins such as:

• html-webpack-plugin
• mini-css-extract-plugin
• webpack-remove-empty-scripts or webpack-fix-style-only-entries (bug fix plugins for mini-css-extract-plugin)
• pug-loader (this loader is already included in the pug-plugin)

For example, webpack.config.js

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    'main': 'main.js',
    'styles': 'styles.scss',
    'index': 'index.html', // now is possible define HTML file in entry
    'page01': 'page01.pug', // now is possible define PUG file in entry
    // ...
  },
  plugins: [
    new PugPlugin(), // supports zero config using default webpack output options 
  ]
};

The plugin can be used not only for pug but also for simply extracting HTML or CSS from webpack entry, independent of pug usage.

For more examples see the pug-plugin.

Install

npm install webpack-remove-empty-scripts --save-dev

Usage

The example of webpack.config.js:

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

enabled

Type: boolean Default: true
Enable / disable the plugin. Tip: Use disable for development to improve performance.

extensions

Type: RegExp Default: /\.(css|scss|sass|less|styl)([?].*)?$/ Note: the Regexp should have the query part at end ([?].*)?$ to match assets like style.css?key=val
Type: string[] Default: ['css', 'scss', 'sass', 'less', 'styl']. It is automatically converted to type RegExp.

ignore

Type: string | RegExp | string[] | RegExp[] Default: null
Match resource path to be ignored.

verbose

Type: boolean Default: false
Show process information.

Recipes

Show logs to console by development

const isProduction = process.env.NODE_ENV === 'production';
new RemoveEmptyScriptsPlugin({ verbose: isProduction !== true })

Disable plugin by development to improve performance

const isProduction = process.env.NODE_ENV === 'production';
new RemoveEmptyScriptsPlugin({ enabled: isProduction === true })

Identify only .foo and .bar extensions as styles

new RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ })

Usage a javascript entry to styles

Give an especial extension to your file, for example .css.js:

new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ })

Recursive ignore all js files from directory, for example my-workers/

new RemoveEmptyScriptsPlugin({
  ignore: [
    /my-workers\/.+\.js$/,
  ]
})

Usage webpack-hot-middleware

new RemoveEmptyScriptsPlugin({
  ignore: [
    'webpack-hot-middleware',
  ]
})

See the test case.

Testing

npm run test will run the unit and integration tests.
npm run test:coverage will run the tests with coverage.

Also See

• more examples of usages see in test cases
• pug-plugin
• pug-loader

License

ISC