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

Usage with Pug

If you use Pug with this plugin, then you should use the pug-plugin.
Pug plugin enable using Pug files directly in webpack entry.
Pug plugin extract JavaScript and CSS from sources used in Pug.

💡Using pug-plugin the entry-point is the Pug template, not a JS file.

Define Pug files in webpack entry:

const PugPlugin = require('pug-plugin');
module.exports = {
  entry: {
    // all script and style sources can be defined directly in Pug
    index: './src/views/index.pug',      // => dist/index.html
    about: './src/views/about/index.pug' // => dist/about.html
  },
  plugins: [
    // enable using Pug files in webpack entry
    new PugPlugin({
      // extract CSS from style sources defined in Pug
      extractCss: {
        // output filename of styles
        filename: 'assets/css/[name].[contenthash:8].css',
      },
    }),
  ],
};

Use source files of styles and scripts directly in Pug:

link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))

Generated HTML contains hashed CSS and JS output filenames:

<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>

You don't need anymore to use html-webpack-plugin mini-css-extract-plugin webpack-remove-empty-scripts and pug-loader. The single pug-plugin replaces all most used functions of these plugins and loaders. Keep your webpack config clear and clean.

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.
Search for empty js files in source files only with these extensions.

ignore

Type: string | RegExp | string[] | RegExp[] Default: null
Ignore source files.

remove

Type: RegExp Default: /\.(js|mjs)$/
Remove generated scripts.

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)$/ })

Remove generated scripts *.js *.mjs except *.rem.js *.rem.mjs

new RemoveEmptyScriptsPlugin({ remove: /(?<!\.rem)\.(js|mjs)$/ })

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.

New experimental version

The experimental version ^1.x.x 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.8.x in the branch master.

Also See

• more examples of usages see in test cases
• ansis - ANSI color styling of text in terminal
• pug-plugin
• pug-loader

License

ISC