gkostov / webpack-remove-empty-scripts

The plugin remove empty scripts generated by usage only a style without js in entry.

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

Webpack generates a js file for each resource defined in a webpack entry. Some extract plugins use webpack entry to define non-js resources. For example, in webpack entry might be defined resources like js, css, scss, html, pug, etc. Each resource type needs its own extract plugin and loader. Such a extract plugin should take care of eliminating the phantom js files for non-js resources by self. But the mini-css-extract-plugin not do it. This plugin fixes this, finds and removes phantom js files for non-js resources.

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:

• extract-text-webpack-plugin issue
• mini-css-extract-plugin issue

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 0.7.2 in the branch stable.

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 scss resources defined in webpack entry
• doesn't need any fix plugins like webpack-remove-empty-scripts, because it doesn't generate empty js files
• is very flexible and fast

Improve performance with pug-plugin. Using the pug-plugin for pug html scss etc in the webpack entry no longer requires additional plugins such as:

• html-webpack-plugin
• mini-css-extract-plugin
• webpack-remove-empty-scripts (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