Skip to content

Commit

Permalink
added new option remove to define custom RegExp for generated asset…
Browse files Browse the repository at this point in the history
…s that must be removed
  • Loading branch information
webdiscus committed Apr 1, 2022
1 parent bd54db0 commit 2bd1fa2
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 33 deletions.
20 changes: 12 additions & 8 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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`.

Expand All @@ -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
Expand All @@ -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.

Expand Down
20 changes: 15 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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({
Expand Down
27 changes: 14 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
@@ -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)",
Expand All @@ -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",
Expand All @@ -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"
}
Expand Down
6 changes: 3 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions test/cases/option-remove/expected.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
[
"style.css",
"style.rem.css",
"style.rem.js"
]
3 changes: 3 additions & 0 deletions test/cases/option-remove/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
h1 {
color: red;
}
27 changes: 27 additions & 0 deletions test/cases/option-remove/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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',
}),
],
};
9 changes: 5 additions & 4 deletions test/index.integration.test.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -34,7 +36,6 @@ const testOnly = [
//'webpack-concatenate-modules',
];

const cases = fs.readdirSync(path.join(__dirname, 'cases'));

beforeAll(() => {
rimraf.sync(path.join(__dirname, 'output'));
Expand Down

0 comments on commit 2bd1fa2

Please sign in to comment.