fix: keep extracted wordpress dependencies

Author: webdiscus

.editorconfig

@@ -4,7 +4,10 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[test/cases/**.html]
-end_of_line = lf
-# disable final new line for expected html files
-insert_final_newline = false
+[{*.cjs,*.js}]
+indent_size = 2
+tab_width = 2
+
+[{*.htm,*.html,*.pug,*.md}]
+indent_size = 2
+tab_width = 2

.prettierrc

@@ -15,6 +15,12 @@
       "options": {
         "tabWidth": 4
       }
+    },
+    {
+      "files": ["*.md"],
+      "options": {
+        "tabWidth": 2
+      }
     }
   ]
 }

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.8.3 (2022-09-04)
+- docs: update readme
+
+## 0.8.2 (2022-09-04)
+- fix: keep extracted wordpress dependencies, #9
+- test: refactor tests
+- chore: update npm packages
+
 ## 0.8.1 (2022-06-14)
 - fix: add supports for TypeScript
 - chore: update packages

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.8.1)
+[![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.3)
 [![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)
@@ -54,32 +54,29 @@ Define Pug files in webpack entry:
 const PugPlugin = require('pug-plugin');
 module.exports = {
   entry: {
-    // all sources of scripts and styles can be used directly in Pug
-    // here should be defined Pug templates only
-    index: './src/views/index.pug',      // output index.html
-    about: './src/views/about/index.pug' // output about.html
-    // ..
+    // 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({
-      modules: [
-        // enable extract CSS from source of styles used in Pug
-        PugPlugin.extractCss({
-          // output filename of styles
-          filename: 'assets/css/[name].[contenthash:8].css',
-        }),
-      ],
+      // 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:
 ```pug
 link(href=require('./styles.scss') rel='stylesheet')
 script(src=require('./main.js'))
 ```
+
 Generated HTML contains hashed CSS and JS output filenames:
 ```html
 <link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-remove-empty-scripts",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Webpack 5 plugin to remove empty scripts generated by usage only style in webpack entry.",
   "keywords": [
     "webpack",
@@ -36,22 +36,13 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-
+  "main": "src/index.js",
   "scripts": {
     "test": "jest --detectOpenHandles --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",
-    "coverageDirectory": "./coverage/",
-    "collectCoverage": true
-  },
-  "main": "src/index.js",
-  "directories": {
-    "test": "test"
-  },
   "files": [
     "src",
     "CHANGELOG.md",
@@ -65,22 +56,22 @@
     "webpack": ">=5.32.0"
   },
   "dependencies": {
-    "ansis": "^1.3.6"
+    "ansis": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@types/jest": "^28.1.1",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-env": "^7.18.10",
+    "@test-fixtures/lorem" : "0.0.2",
+    "@types/jest": "^28.1.8",
+    "@wordpress/scripts": "^23.4.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.1",
-    "fs": "^0.0.1-security",
-    "html-loader": "^3.1.0",
-    "jest": "^28.1.1",
-    "mini-css-extract-plugin": "^2.6.0",
-    "moment": "^2.29.3",
-    "rimraf": "^3.0.2",
-    "terser-webpack-plugin": "^5.3.3",
-    "webpack": "^5.73.0",
-    "webpack-hot-middleware": "^2.25.1",
+    "html-loader": "^4.1.0",
+    "jest": "^28.1.3",
+    "mini-css-extract-plugin": "^2.6.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.74.0",
+    "webpack-hot-middleware": "^2.25.2",
     "webpack-merge": "^5.8.0"
   }
 }

src/index.js

@@ -5,7 +5,9 @@
 const path = require('path');
 const ansis = require('ansis');
 
-const plugin = 'remove-empty-scripts';
+const { outToConsole } = require('./utils');
+
+const pluginName = 'remove-empty-scripts';
 const defaultOptions = {
   enabled: true,
   verbose: false,
@@ -19,6 +21,9 @@ const defaultOptions = {
 let dependencyId = 1;
 
 class WebpackRemoveEmptyScriptsPlugin {
+  outputPath = '';
+  trash = [];
+
   constructor (options) {
     this.apply = this.apply.bind(this);
     this.options = Object.assign({}, defaultOptions, options);
@@ -40,26 +45,29 @@ class WebpackRemoveEmptyScriptsPlugin {
   apply (compiler) {
     if (!this.enabled) return;
 
-    const { remove: removeAssets, ignore: ignoreEntryResource, extensions: styleExtensionRegexp } = this.options;
+    // clear cache for webpack dev server
+    this.trash = [];
+    this.outputPath = compiler.options.output.path;
 
-    compiler.hooks.compilation.tap(plugin, compilation => {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
       const resourcesCache = [];
 
-      compilation.hooks.chunkAsset.tap(plugin, (chunk, filename) => {
+      compilation.hooks.chunkAsset.tap(pluginName, (chunk, filename) => {
+        const { remove: removeAssets, ignore: ignoreEntryResource, extensions: styleExtensionRegexp } = this.options;
         if (!removeAssets.test(filename)) return;
 
-        const outputPath = compiler.options.output.path;
         const chunkGraph = compilation.chunkGraph;
         let entryResources = [];
 
         for (const module of chunkGraph.getChunkEntryModulesIterable(chunk)) {
           if (!compilation.modules.has(module)) {
             throw new Error(
-              `\n${ansis.black.bgRed(`[${plugin}]`)} entry module in chunk but not in compilation ${chunk.debugId} ${module.debugId}`
+              `\n${ansis.black.bgRed(
+                `[${pluginName}]`)} entry module in chunk but not in compilation ${chunk.debugId} ${module.debugId}`,
             );
           }
 
-          const moduleResources = collectEntryResources(compilation, module, resourcesCache);
+          const moduleResources = getEntryResources(compilation, module, resourcesCache);
           entryResources = entryResources.concat(moduleResources);
         }
 
@@ -72,24 +80,29 @@ class WebpackRemoveEmptyScriptsPlugin {
 
         if (isEmptyScript) {
           if (this.verbose) {
-            const outputFile = path.join(outputPath, filename);
-            console.log(
-              `${ansis.black.bgYellow(`[${plugin}]`)} remove ${ansis.cyan(outputFile)}`,
+            const outputFile = path.join(this.outputPath, filename);
+            outToConsole(
+              `${ansis.black.bgYellow(`[${pluginName}]`)} remove ${ansis.cyan(outputFile)}\n`,
             );
           }
-
-          chunk.files.delete(filename);
-          compilation.deleteAsset(filename);
+          // note: do not delete here compilation empty assets, do it in 'afterProcessAssets' only
+          this.trash.push(filename);
         }
       });
+
+      // Delete empty scripts only after processing all plugins,
+      // otherwise, by usage some plugins, the necessary files may be not created.
+      compilation.hooks.afterProcessAssets.tap(pluginName, () => {
+        this.trash.forEach(file => compilation.deleteAsset(file));
+      });
     });
   }
 }
 
-function collectEntryResources (compilation, module, cache) {
+function getEntryResources (compilation, module, cache) {
   const moduleGraph = compilation.moduleGraph,
     index = moduleGraph.getPreOrderIndex(module),
-    propNameDependencyId = '__dependencyWebpackRemoveEmptyScriptsUniqueId',
+    propNameDependencyId = '__webpackRemoveEmptyScriptsUniqueId',
     resources = [];
 
   // the index can be null
@@ -108,7 +121,6 @@ function collectEntryResources (compilation, module, cache) {
 
   if (module.dependencies) {
     module.dependencies.forEach(dependency => {
-
       let module = moduleGraph.getModule(dependency),
         originModule = moduleGraph.getParentModule(dependency),
         nextModule = module || originModule,
@@ -119,11 +131,8 @@ function collectEntryResources (compilation, module, cache) {
         useNextModule = true;
       }
 
-      // debug info
-      //console.log('::: module ::: ', useNextModule ? '' : '-----', dependency[propNameDependencyId]);
-
       if (nextModule && useNextModule) {
-        const dependencyResources = collectEntryResources(compilation, nextModule, cache);
+        const dependencyResources = getEntryResources(compilation, nextModule, cache);
 
         for (let i = 0, length = dependencyResources.length; i !== length; i++) {
           const file = dependencyResources[i];

src/utils.js

@@ -0,0 +1,5 @@
+const outToConsole = (...args) => process.stdout.write(args.join(' ') + '\n');
+
+module.exports = {
+  outToConsole,
+};

test/cases/vendor+multi-js-entry-css-entry/style.css renamed to test/cases/css-entry-only/expected/assets/css/style.css

@@ -3,3 +3,4 @@ body {
   width: 100%;
   height: 100%;
 }
+

test/cases/webpack-concatenate-modules/style.css renamed to test/cases/css-entry-only/expected/style.css

@@ -3,3 +3,4 @@ body {
   width: 100%;
   height: 100%;
 }
+