added new option remove to define custom RegExp for generated assets that must be removed

Author: webdiscus

CHANGELOG.md

@@ -1,20 +1,24 @@
-## 0.7.3 (Jan 30, 2022) The last stable version
+## 0.8.0 (2022-04-01) The last stable version
+- added new option `remove` to define custom RegExp for generated assets that must be removed
+- update packages
+
+## 0.7.3 (2022-01-30)
 - added color verbose output via ANSI color library - ansis
 - added the test case for styles imported from javascript 
 
-## 0.7.2 (Dec 13, 2021)
+## 0.7.2 (2021-12-13)
 - added new option `enable` to enable / disable the plugin, e.g. by development
 - added supports of `RegExp` for option `extensions`
 - remove deprecated option `silent`, use `verbose` to show process information (no braking change)
 - added GitHub workflow + codecov
 - update packages
 - update readme
 
-## 0.7.1 (Jan 14, 2021)
+## 0.7.1 (2021-01-14)
 ### Bugfixes
 - fix the issue infinite recursion by collect of resources from dependency modules by usage in react app some big components with many thousands dependencies
 
-## 0.7.0 (Dec 21, 2020)
+## 0.7.0 (2020-12-21)
 ### Breaking change
 - deprecate the `silent` option, it will be removed on Juni 30, 2021. Use option `verbose: true` to show in console each removed empty file. Defaults, `verbose: false`.
 
@@ -25,7 +29,7 @@
   - webpack setting `externals.jquery: 'jQuery'` or other external libs
 - The issue if first in webpack entries are a styles and then a scripts.
 
-## 0.6.4 (Dec 19, 2020)
+## 0.6.4 (2020-12-19)
 - fix the error: `Maximum call stack size exceeded` with webpack setting `optimization.concatenateModules: true`and usage in script imports from `react` and `redux`
 - added the test case for single style without a scripts in webpack config
 - added silent mode in tests to suppress output log info in the console
@@ -34,14 +38,14 @@
   - added default value of `ignore` as `['/node_modules/']` to ignore resources from `node_modules` path
 - update npm packages.
 
-## 0.6.3 (Oct 25, 2020)
+## 0.6.3 (2020-10-25)
 - fix BREAKING CHANGE in Webpack 5: no more changes should happen to `Compilation.assets`
 - update code accord new API
 
-## 0.6.2 (Oct 24, 2020)
+## 0.6.2 (2020-10-24)
 Update npm packages.
 
-## 0.6.1 (Oct 20, 2020)
+## 0.6.1 (2020-10-20)
 The fork of original [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) (ver. 0.6.0) for support only Webpack 5 and above. 
 The Webpack 4 is no longer supported.
 

README.md

@@ -1,4 +1,4 @@
-[![npm](https://img.shields.io/npm/v/webpack-remove-empty-scripts/latest?logo=npm&color=brightgreen "npm package")](https://www.npmjs.com/package/webpack-remove-empty-scripts/v/0.7.3)
+[![npm](https://img.shields.io/npm/v/webpack-remove-empty-scripts/latest?logo=npm&color=brightgreen "npm package")](https://www.npmjs.com/package/webpack-remove-empty-scripts/v/0.8.0)
 [![node](https://img.shields.io/node/v/webpack-remove-empty-scripts)](https://nodejs.org)
 [![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/webpack-remove-empty-scripts/peer/webpack)](https://webpack.js.org/)
 [![codecov](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts/branch/master/graph/badge.svg)](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
@@ -40,11 +40,11 @@ You can find more info by the following issues:
  - [mini-css-extract-plugin issue](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151)
 
 ## NEW
-> The `experimental` version [`0.8.0`](https://github.com/webdiscus/webpack-remove-empty-scripts) has **_new improved and fast algorithm_** to detect generated needless empty js files.\
+> 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). 
 
-> :warning: The last stable release is `0.7.3` in the branch [`stable`](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/stable).
+> :warning: The last stable release is `0.8.0` in the branch [`master`](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/master).
 
 ## Propose
 If you use the `mini-css-extract-plugin` only to extract `css` files from styles defined in webpack entry 
@@ -129,11 +129,16 @@ Enable / disable the plugin.
 ### `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>
-Type: `string[]` Default: `['css', 'scss', 'sass', 'less', 'styl']`. It is automatically converted to type `RegExp`.
+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`<br>
-Match resource path to be ignored.
+Ignore source files.
+
+### `remove`
+Type: `RegExp` Default: `/\.(js|mjs)$/`<br>
+Remove generated scripts.
 
 ### `verbose`
 Type: `boolean` Default: `false`<br>
@@ -165,6 +170,11 @@ 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`
+```JavaScript
+new RemoveEmptyScriptsPlugin({ remove: /(?<!\.rem)\.(js|mjs)$/ })
+```
+
 ### Recursive ignore all js files from directory, for example `my-workers/`
 ```JavaScript
 new RemoveEmptyScriptsPlugin({

package.json

@@ -1,20 +1,19 @@
 {
   "name": "webpack-remove-empty-scripts",
-  "version": "0.7.3",
-  "description": "Webpack 5 plugin to remove empty scripts generated by usage only styles in webpack entry.",
+  "version": "0.8.0",
+  "description": "Webpack 5 plugin to remove empty scripts generated by usage only style in webpack entry.",
   "keywords": [
     "webpack",
     "remove",
     "empty",
     "script",
     "style",
+    "entry",
     "extract",
     "scss",
     "sass",
     "css",
-    "js",
-    "entry",
-    "css-extract"
+    "js"
   ],
   "license": "ISC",
   "author": "webdiscus (https://github.com/webdiscus)",
@@ -40,7 +39,9 @@
 
   "scripts": {
     "test": "jest --detectOpenHandles --config ./test/jest.config.js",
-    "test:coverage": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js"
+    "test:coverage": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js",
+    "publish:public": "npm publish --access public",
+    "publish:beta": "npm publish --tag beta"
   },
   "jest": {
     "testEnvironment": "node",
@@ -67,18 +68,18 @@
     "ansis": "^1.3.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.12",
+    "@babel/core": "^7.17.8",
     "@babel/preset-env": "^7.16.11",
-    "@types/jest": "^27.4.0",
-    "css-loader": "^6.5.1",
+    "@types/jest": "^27.4.1",
+    "css-loader": "^6.7.1",
     "fs": "^0.0.1-security",
     "html-loader": "^3.1.0",
-    "jest": "^27.4.7",
-    "mini-css-extract-plugin": "^2.5.3",
+    "jest": "^27.5.1",
+    "mini-css-extract-plugin": "^2.6.0",
     "moment": "^2.29.1",
     "rimraf": "^3.0.2",
-    "terser-webpack-plugin": "^5.3.0",
-    "webpack": "^5.67.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.70.0",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0"
   }

src/index.js

@@ -10,8 +10,8 @@ const defaultOptions = {
   enabled: true,
   verbose: false,
   extensions: ['css', 'scss', 'sass', 'less', 'styl'],
-  scriptExtensionsTest: /\.(js|mjs)$/,
   ignore: [],
+  remove: /\.(js|mjs)$/,
 };
 
 // Save unique id in dependency object as marker of 'analysed module'
@@ -40,13 +40,13 @@ class WebpackRemoveEmptyScriptsPlugin {
   apply (compiler) {
     if (!this.enabled) return;
 
-    const { ignore: ignoreEntryResource, extensions: styleExtensionRegexp } = this.options;
+    const { remove: removeAssets, ignore: ignoreEntryResource, extensions: styleExtensionRegexp } = this.options;
 
     compiler.hooks.compilation.tap(plugin, compilation => {
       const resourcesCache = [];
 
       compilation.hooks.chunkAsset.tap(plugin, (chunk, filename) => {
-        if (!defaultOptions.scriptExtensionsTest.test(filename)) return;
+        if (!removeAssets.test(filename)) return;
 
         const outputPath = compiler.options.output.path;
         const chunkGraph = compilation.chunkGraph;

test/cases/option-remove/expected.json

@@ -0,0 +1,5 @@
+[
+  "style.css",
+  "style.rem.css",
+  "style.rem.js"
+]

test/cases/option-remove/style.css

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

test/cases/option-remove/webpack.config.js

@@ -0,0 +1,27 @@
+const WebpackRemoveEmptyScripts = require('../../../src/index.js');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: {
+    'style': './style.css',
+    'style.rem': './style.css',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new WebpackRemoveEmptyScripts({
+      verbose: true,
+      remove: /(?<!\.rem)\.(js|mjs)$/, // generated assets `*.js` must be removed, but not `*.rem.js`
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+};

test/index.integration.test.js

@@ -1,21 +1,23 @@
-import { readDirRecursiveSync } from './utils/file';
-
 const fs = require('fs');
 const path = require('path');
 const rimraf = require('rimraf');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 
+import { readDirRecursiveSync } from './utils/file';
+
 //const modes = ['development'];
 const modes = ['development', 'production'];
+const cases = fs.readdirSync(path.join(__dirname, 'cases'));
 
 // if not empty, then test only this cases
 const testOnly = [
-  //'css-import',
   //'option-extension-array',
   //'option-extension-regexp',
   //'option-ignore-array',
   //'option-ignore-string',
+  // 'option-remove',
+  //'css-import',
   //'css-entry-only',
   //'css-entry-with-ignored-hmr',
   //'css-entry-with-query',
@@ -34,7 +36,6 @@ const testOnly = [
   //'webpack-concatenate-modules',
 ];
 
-const cases = fs.readdirSync(path.join(__dirname, 'cases'));
 
 beforeAll(() => {
   rimraf.sync(path.join(__dirname, 'output'));