feat(BRAKING CHANGE): add new stage option and reverted defaults behavior as in v0.8.1

Author: webdiscus

CHANGELOG.md

@@ -1,3 +1,22 @@
+## 1.0.0 (2022-09-12)
+- BRAKING CHANGE: reverted defaults behavior as in `v0.8.1` - remove empty scripts before other plugins will be called.
+  This change is needs for properly work of the vast majority of webpack plugins.
+
+  For compatibility with `v0.8.2 - v0.8.4`, if you have an issue, use new `stage` option with the value:
+  ```js
+  new RemoveEmptyScriptsPlugin({
+    stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
+  })
+  ```
+- feat: added new `stage` option.
+  Webpack plugins use different stages for their functionality.
+  For properly work other plugins can be specified the `stage` when should be removed empty scripts: before or after processing of other webpack plugins.\
+  For example, using `@wordpress/dependency-extraction-webpack-plugin` the empty scripts must be removed `after` processing all plugins.
+  Using `webpack-manifest-plugin` the empty scripts must be removed `before` processing other plugins.
+- chore: update packages
+- test: added the test for using with webpack-manifest-plugin
+- docs: update readme
+
 ## 0.8.4 (2022-09-08)
 - fix: fixed last stable version of ansis in package.json to avoid issues in dependency
 

README.md

@@ -10,11 +10,21 @@
 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](https://github.com/fqborges/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](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/CHANGELOG.md#061-oct-20-2020).
+This fork fixes deprecation messages, issues when using React and some specific plugins.
 
 The plugin support only `Webpack 5`.
 For `Webpack 4` use original [plugin](https://github.com/fqborges/webpack-fix-style-only-entries).
 
+> **Warning**
+> 
+> The new version `1.0.0` has probable `BRAKING CHANGE`.\
+> In this version was reverted defaults behavior as in `v0.8.1` - remove empty scripts `before` processing other plugins.
+
+> **Migration to v1.0.0**
+> 
+> When update from `<= v0.8.1`, nothing needs to be done.\
+> When update from `v0.8.2 - v0.8.4`, if you have an issue, try to use new `stage` option with `RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS` value. 
+
 ## Description of the problem
 
 Webpack generates a js file for each resource defined in a webpack entry.
@@ -132,6 +142,26 @@ Type: `boolean` Default: `true`<br>
 Enable / disable the plugin.
 **Tip:** Use `disable` for development to improve performance.
 
+### `stage`
+Type: `number`<br>
+Values:
+- `RemoveEmptyScriptsPlugin.STAGE_BEFORE_PROCESS_PLUGINS` (default)\
+  Remove empty scripts `before` processing other plugins.\
+  For example, exact this stage needs for properly work of the `webpack-manifest-plugin`.
+- `RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS`\
+  Remove empty scripts `after` processing all other plugins.\
+  For example, exact this stage needs for properly work of the `@wordpress/dependency-extraction-webpack-plugin`.
+
+Webpack plugins use different stages for their functionality.
+For properly work other plugins can be specified the `stage` when should be removed empty scripts: before or after processing of other webpack plugins.
+
+See [usage example](#usage-stage-optoion).
+
+> **Warning**
+> 
+> Because `webpack-manifest-plugin` and `@wordpress/dependency-extraction-webpack-plugin` needs different stages
+> both plugins can't be used together with `RemoveEmptyScriptsPlugin` at one configuration.
+
 ### `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` <br>
@@ -153,36 +183,71 @@ Show process information.
 ## Recipes
 
 ### Show logs to console by development
-```JavaScript
+```js
 const isProduction = process.env.NODE_ENV === 'production';
 new RemoveEmptyScriptsPlugin({ verbose: isProduction !== true })
 ```
 
 ### Disable plugin by development to improve performance
-```JavaScript
+```js
 const isProduction = process.env.NODE_ENV === 'production';
 new RemoveEmptyScriptsPlugin({ enabled: isProduction === true })
 ```
 
+<a id="usage-stage-optoion" name="usage-stage-optoion" href="#usage-stage-optoion"></a>
+### Specify stage for properly work some plugins
+For example, using `@wordpress/dependency-extraction-webpack-plugin` the empty scripts must be removed `after` processing all plugins.
+
+```js
+const path = require('path');
+const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'public'),
+  },
+  entry: {
+    'main': './src/sass/main.scss',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new DependencyExtractionWebpackPlugin(),
+    new RemoveEmptyScriptsPlugin({
+      stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS, // <- use this option
+    }),
+  ],
+};
+```
+
 ### Identify only `.foo` and `.bar` extensions as styles
 
-```JavaScript
+```js
 new RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ })
 ```
 
 ### Usage a javascript entry to styles
 Give an especial extension to your file, for example `.css.js`:
-```JavaScript
+```js
 new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ })
 ```
 
 ### Remove generated scripts `*.js` `*.mjs` except `*.rem.js` `*.rem.mjs`
-```JavaScript
+```js
 new RemoveEmptyScriptsPlugin({ remove: /(?<!\.rem)\.(js|mjs)$/ })
 ```
 
 ### Recursive ignore all js files from directory, for example `my-workers/`
-```JavaScript
+```js
 new RemoveEmptyScriptsPlugin({
   ignore: [
     /my-workers\/.+\.js$/,
@@ -191,7 +256,7 @@ new RemoveEmptyScriptsPlugin({
 ```
 
 ### Usage webpack-hot-middleware
-```JavaScript
+```js
 new RemoveEmptyScriptsPlugin({
   ignore: [
     'webpack-hot-middleware',
@@ -205,21 +270,13 @@ new RemoveEmptyScriptsPlugin({
 `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](https://github.com/webdiscus/webpack-remove-empty-scripts/issues).
-
-> ⚠️ The last stable release is `0.8.x` in the branch [`master`](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/master).
-
 
 ## Also See
 
 - more examples of usages see in [test cases](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/master/test/cases)
-- [ansis][ansis] - ANSI color styling of text in terminal
-- [pug-plugin][pug-plugin]
-- [pug-loader][pug-loader]
+- [ansis][ansis] - Formatting text in terminal with ANSI colors & styles.
+- [pug-plugin][pug-plugin] - plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.
+- [pug-loader][pug-loader] - loader for Webpack renders Pug to HTML or template function. Optimized for using with Vue.
 
 ## License
 [ISC](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/LICENSE)
@@ -228,4 +285,4 @@ new RemoveEmptyScriptsPlugin({
 [ansis]: https://github.com/webdiscus/ansis
 [pug-plugin]: https://github.com/webdiscus/pug-plugin
 [pug-loader]: https://github.com/webdiscus/pug-loader
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webpack-remove-empty-scripts",
-  "version": "0.8.4",
-  "description": "Webpack 5 plugin to remove empty scripts generated by usage only style in webpack entry.",
+  "version": "1.0.0",
+  "description": "Plugin for Webpack 5 to remove empty scripts generated by usage only style in webpack entry.",
   "keywords": [
     "webpack",
     "remove",
@@ -56,7 +56,7 @@
     "webpack": ">=5.32.0"
   },
   "dependencies": {
-    "ansis": "1.4.0"
+    "ansis": "1.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
@@ -72,6 +72,7 @@
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.74.0",
     "webpack-hot-middleware": "^2.25.2",
+    "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0"
   }
 }

src/index.d.ts

@@ -5,13 +5,20 @@ interface IOptions {
   extensions: Array<string> | RegExp,
   ignore: string | RegExp | string[] | RegExp[],
   remove: RegExp,
+  stage: number,
   verbose: boolean;
 }
 
 export type WebpackRemoveEmptyScriptsPluginOptions = Partial<IOptions>;
 
 declare class WebpackRemoveEmptyScriptsPlugin implements WebpackPluginInstance {
+  [index: string]: any;
+
+  public static STAGE_BEFORE_PROCESS_PLUGINS: number;
+  public static STAGE_AFTER_PROCESS_PLUGINS: number;
+
   constructor(options: WebpackRemoveEmptyScriptsPluginOptions);
+
   apply(compiler: Compiler): void;
 }
 

src/index.js

@@ -3,18 +3,13 @@
  */
 
 const path = require('path');
-const ansis = require('ansis');
+const { red, green, cyan, cyanBright, yellow, magenta, white, black, gray, blueBright } = require('ansis/colors');
 
 const { outToConsole } = require('./utils');
 
 const pluginName = 'remove-empty-scripts';
-const defaultOptions = {
-  enabled: true,
-  verbose: false,
-  extensions: ['css', 'scss', 'sass', 'less', 'styl'],
-  ignore: [],
-  remove: /\.(js|mjs)$/,
-};
+const infoPluginName = `\n${black.bgYellow`[${pluginName}]`}`;
+const errorPluginName = `\n${black.bgRed`[${pluginName}]`}`;
 
 // Save unique id in dependency object as marker of 'analysed module'
 // to avoid the infinite recursion by collect of resources.
@@ -24,6 +19,9 @@ class WebpackRemoveEmptyScriptsPlugin {
   outputPath = '';
   trash = [];
 
+  static STAGE_BEFORE_PROCESS_PLUGINS = 100;
+  static STAGE_AFTER_PROCESS_PLUGINS = 200;
+
   constructor (options) {
     this.apply = this.apply.bind(this);
     this.options = Object.assign({}, defaultOptions, options);
@@ -62,8 +60,7 @@ class WebpackRemoveEmptyScriptsPlugin {
         for (const module of chunkGraph.getChunkEntryModulesIterable(chunk)) {
           if (!compilation.modules.has(module)) {
             throw new Error(
-              `\n${ansis.black.bgRed(
-                `[${pluginName}]`)} entry module in chunk but not in compilation ${chunk.debugId} ${module.debugId}`,
+              `${errorPluginName} Entry module in chunk but not in compilation ${chunk.debugId} ${module.debugId}`,
             );
           }
 
@@ -79,14 +76,28 @@ class WebpackRemoveEmptyScriptsPlugin {
           resources.every(resource => styleExtensionRegexp.test(resource));
 
         if (isEmptyScript) {
+          const stage = this.options.stage;
           if (this.verbose) {
             const outputFile = path.join(this.outputPath, filename);
-            outToConsole(
-              `${ansis.black.bgYellow(`[${pluginName}]`)} remove ${ansis.cyan(outputFile)}\n`,
-            );
+            outToConsole(`${infoPluginName} remove ${cyan(outputFile)}\n`);
+          }
+
+          switch (stage) {
+            case WebpackRemoveEmptyScriptsPlugin.STAGE_BEFORE_PROCESS_PLUGINS:
+              // remove empty script immediately, before other plugins will be called
+              compilation.deleteAsset(filename);
+              break;
+            case WebpackRemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS:
+              // add file to trash, which at 'afterProcessAssets' wird cleaned
+              // remove empty script later, after all plugins are called
+              this.trash.push(filename);
+              break;
+            default:
+              throw new Error(
+                `${errorPluginName} Invalid value of config option 'stage': ${gray(stage ? stage.toString() : '')}. `+
+                `See the option description in README.`
+              );
           }
-          // note: do not delete here compilation empty assets, do it in 'afterProcessAssets' only
-          this.trash.push(filename);
         }
       });
 
@@ -99,6 +110,16 @@ class WebpackRemoveEmptyScriptsPlugin {
   }
 }
 
+const defaultOptions = {
+  enabled: true,
+  verbose: false,
+  /** @type {Array<string>|RegExp}  */
+  extensions: ['css', 'scss', 'sass', 'less', 'styl'],
+  ignore: [],
+  remove: /\.(js|mjs)$/,
+  stage: WebpackRemoveEmptyScriptsPlugin.STAGE_BEFORE_PROCESS_PLUGINS,
+};
+
 function getEntryResources (compilation, module, cache) {
   const moduleGraph = compilation.moduleGraph,
     index = moduleGraph.getPreOrderIndex(module),

test/cases/exception-option-stage-invalid/expected/assets.json

@@ -0,0 +1,5 @@
+{
+  "style.css": {
+    "src": "style.css"
+  }
+}

test/cases/exception-option-stage-invalid/expected/style.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

test/cases/wordpress-dependency/src/sass/main.scss renamed to test/cases/exception-option-stage-invalid/src/style.css

@@ -0,0 +1,28 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('../../../src/index.js');
+
+module.exports = {
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, 'public/'),
+  },
+  entry: { style: './src/style.css' },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new RemoveEmptyScriptsPlugin({
+      verbose: true,
+      stage: 'INVALID_VALUE'
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/exception-option-stage-invalid/webpack.config.js

@@ -0,0 +1,5 @@
+{
+  "style.css": {
+    "src": "style.css"
+  }
+}