Skip to content

Commit f798b67

Browse files
G-Rathwebdiscus
G-Rath
authored and
webdiscus
committed
fix: correctly export types for TS when used CommonJS
1 parent 90dc75f commit f798b67

File tree

5 files changed

+111
-110
lines changed

5 files changed

+111
-110
lines changed

‎.github/workflows/test.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Running Code Coverage
1+
name: Test
22

33
on: [ push, pull_request ]
44

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 1.0.2 (2023-04-07)
2+
- fix: correctly export types for TS when used CommonJS
3+
- chore: update dev packages
4+
- docs: update readme
5+
16
## 1.0.1 (2022-09-19)
27
- docs: update readme
38

‎README.md

Lines changed: 89 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
</div>
99

1010
---
11-
[![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)
11+
[![npm](https://img.shields.io/npm/v/webpack-remove-empty-scripts?logo=npm&color=brightgreen "npm package")](https://www.npmjs.com/package/webpack-remove-empty-scripts "download npm package")
1212
[![node](https://img.shields.io/node/v/webpack-remove-empty-scripts)](https://nodejs.org)
1313
[![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/webpack-remove-empty-scripts/peer/webpack)](https://webpack.js.org/)
14+
[![Test](https://github.com/webdiscus/webpack-remove-empty-scripts/actions/workflows/test.yml/badge.svg)](https://github.com/webdiscus/webpack-remove-empty-scripts/actions/workflows/test.yml)
1415
[![codecov](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts/branch/master/graph/badge.svg)](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts)
1516
[![node](https://img.shields.io/npm/dm/webpack-remove-empty-scripts)](https://www.npmjs.com/package/webpack-remove-empty-scripts)
1617

@@ -33,96 +34,83 @@ This plugin removes an unexpected empty JS file.
3334
3435
---
3536

36-
## Usage with `html-webpack-plugin`
37+
## Usage with html-webpack-plugin
38+
39+
> **Warning**
40+
>
41+
> The `webpack-remove-empty-scripts` is the `Emergency Fix` for the `bug` in `mini-css-extract-plugin`.
42+
>
43+
> ✅ It is recommended to use the new powerful [html-bundler-webpack-plugin][html-bundler-webpack-plugin] instead of:
44+
>
45+
> - html-webpack-plugin
46+
> - mini-css-extract-plugin
47+
> - webpack-remove-empty-scripts
48+
49+
### Highlights of html-bundler-webpack-plugin
50+
51+
- **Prevents generating unexpected empty JS files.**
52+
- An [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry) is an HTML template.
53+
- Source **scripts** and **styles** can be specified directly in HTML using `<script>` and `<link>`.
54+
- Extracts JS and CSS from their sources specified in HTML.
55+
- Resolving [source](https://github.com/webdiscus/html-bundler-webpack-plugin#loader-option-sources) assets specified in standard attributes `href` `src` `srcset` etc.
56+
- Inline [JS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-js), [CSS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-css), [SVG](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-image), [PNG](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-image) without additional plugins and loaders.
57+
- Support for [template engines](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-template-engine) such as Eta, EJS, Handlebars, Nunjucks, LiquidJS and others.
3758

38-
💡 It is recommended to use the new powerful [html-bundler-webpack-plugin][html-bundler-webpack-plugin].\
39-
This plugin replaces the functionality of `html-webpack-plugin`, `mini-css-extract-plugin` and **doesn't generate unexpected empty JS files**.
4059

41-
The HTML Bundler Plugin automatically extracts JS, CSS, images, fonts from their sources loaded directly in HTML.
42-
The generated HTML contains output hashed filenames of processed source files.
43-
The plugin allow to use an HTML file or a template as an entry point in Webpack.
4460

4561
### Simple usage example
4662

47-
The source _index.html_
63+
Add source scripts and styles directly to HTML:
64+
4865
```html
4966
<html>
50-
<head>
51-
<!-- load source style -->
52-
<link href="./style.scss" rel="stylesheet">
53-
<!-- load source script -->
54-
<script src="./main.js" defer="defer"></script>
55-
</head>
56-
<body>
57-
<h1>Hello World!</h1>
58-
<!-- load image from source directory -->
59-
<img src="./image.png">
60-
</body>
67+
<head>
68+
<!-- specify source styles -->
69+
<link href="./style.scss" rel="stylesheet">
70+
<!-- specify source scripts here and/or in body -->
71+
<script src="./main.js" defer="defer"></script>
72+
</head>
73+
<body>
74+
<h1>Hello World!</h1>
75+
<!-- specify source images -->
76+
<img src="./logo.png">
77+
</body>
6178
</html>
6279
```
6380

64-
The generated HTML
81+
The generated HTML contains the output filenames of the processed assets:
82+
6583
```html
6684
<html>
67-
<head>
68-
<link href="/assets/css/style.05e4dd86.css" rel="stylesheet">
69-
<script src="/assets/js/main.f4b855d8.js" defer="defer"></script>
70-
</head>
71-
<body>
72-
<h1>Hello World!</h1>
73-
<img src="/assets/img/image.f47ad56f.png">
74-
</body>
85+
<head>
86+
<link href="assets/css/style.05e4dd86.css" rel="stylesheet">
87+
<script src="assets/js/main.f4b855d8.js" defer="defer"></script>
88+
</head>
89+
<body>
90+
<h1>Hello World!</h1>
91+
<img src="assets/img/logo.58b43bd8.png">
92+
</body>
7593
</html>
7694
```
7795

78-
Simple Webpack config
96+
Add the HTML templates in the `entry` option:
97+
7998
```js
80-
const path = require('path');
8199
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
100+
82101
module.exports = {
83-
output: {
84-
path: path.join(__dirname, 'dist/'),
85-
},
86-
entry: {
87-
// define templates here
88-
index: './src/views/index.html', // => dist/index.html
89-
'pages/about': './src/views/about/index.html', // => dist/pages/about.html
90-
// ...
91-
},
92102
plugins: [
93103
new HtmlBundlerPlugin({
94-
js: {
95-
// output filename of extracted JS from source script loaded in HTML via `<script>` tag
96-
filename: 'assets/js/[name].[contenthash:8].js',
97-
},
98-
css: {
99-
// output filename of extracted CSS from source style loaded in HTML via `<link>` tag
100-
filename: 'assets/css/[name].[contenthash:8].css',
104+
// define a relative or absolute path to template pages
105+
entry: 'src/views/',
106+
// OR define templates manually
107+
entry: {
108+
index: 'src/views/home.html', // => dist/index.html
109+
'news/sport': 'src/views/news/sport/index.html', // => dist/news/sport.html
101110
},
102111
}),
103112
],
104-
module: {
105-
rules: [
106-
// templates
107-
{
108-
test: /\.html$/,
109-
loader: HtmlBundlerPlugin.loader, // HTML loader
110-
},
111-
// styles
112-
{
113-
test: /\.(css|sass|scss)$/,
114-
use: ['css-loader', 'sass-loader'],
115-
},
116-
// images
117-
{
118-
test: /\.(png|jpe?g)/,
119-
type: 'asset/resource',
120-
generator: {
121-
filename: 'assets/img/[name].[hash:8][ext]',
122-
},
123-
},
124-
],
125-
},
113+
// ... loaders for styles, images, etc.
126114
};
127115
```
128116

@@ -145,27 +133,27 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
145133
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
146134

147135
module.exports = {
148-
entry: {
149-
'main' : './app/main.js',
150-
'styles': ['./common/styles.css', './app/styles.css']
151-
},
152-
module: {
153-
rules: [
154-
{
155-
test: /\.css$/,
156-
use: [
157-
MiniCssExtractPlugin.loader,
158-
'css-loader',
159-
]
160-
},
136+
entry: {
137+
'main' : './app/main.js',
138+
'styles': ['./common/styles.css', './app/styles.css']
139+
},
140+
module: {
141+
rules: [
142+
{
143+
test: /\.css$/,
144+
use: [
145+
MiniCssExtractPlugin.loader,
146+
'css-loader',
161147
]
162-
},
163-
plugins: [
164-
new RemoveEmptyScriptsPlugin(),
165-
new MiniCssExtractPlugin({
166-
filename: '[name].[chunkhash:8].css',
167-
}),
168-
],
148+
},
149+
]
150+
},
151+
plugins: [
152+
new RemoveEmptyScriptsPlugin(),
153+
new MiniCssExtractPlugin({
154+
filename: '[name].[chunkhash:8].css',
155+
}),
156+
],
169157
};
170158
```
171159
---
@@ -309,34 +297,40 @@ new RemoveEmptyScriptsPlugin({
309297
## Who use this plugin
310298

311299
<a href='https://github.com/mozilla'>
312-
<img src='https://avatars.githubusercontent.com/u/131524?s=42&v=4' title='mozilla'>
300+
<img src='https://avatars.githubusercontent.com/u/131524?s=42&v=4' title='Mozilla'>
313301
</a>
314302
<a href='https://github.com/pypi/warehouse'>
315-
<img src="https://avatars.githubusercontent.com/u/2964877?s=42&v=4" title='pypi'>
303+
<img src="https://avatars.githubusercontent.com/u/2964877?s=42&v=4" title='PyPi'>
304+
</a>
305+
<a href='https://github.com/preactjs'>
306+
<img src="https://avatars.githubusercontent.com/u/26872990?s=42&v=4" title='Preact'>
316307
</a>
317308
<a href='https://github.com/rails/jsbundling-rails/blob/main/docs/switch_from_webpacker.md'>
318-
<img src="https://avatars.githubusercontent.com/u/4223?s=42&v=4" title='rails'>
309+
<img src="https://avatars.githubusercontent.com/u/4223?s=42&v=4" title='Rails'>
319310
</a>
320311
<a href='https://www.cisco.com/c/dam/en_us/about/doing_business/open_source/docs/slido-test-2206-1655452418.pdf'>
321-
<img src='https://avatars.githubusercontent.com/u/1376999?s=42&v=4' title='cisco'>
312+
<img src='https://avatars.githubusercontent.com/u/1376999?s=42&v=4' title='Cisco'>
322313
</a>
323314
<a href='https://github.com/jenkinsci'>
324315
<img src='https://avatars.githubusercontent.com/u/107424?s=42&v=4' title='Jenkins'>
325316
</a>
326317
<a href='https://github.com/coinbase'>
327-
<img src='https://avatars.githubusercontent.com/u/1885080?s=42&v=4' title='coinbase'>
318+
<img src='https://avatars.githubusercontent.com/u/1885080?s=42&v=4' title='Coinbase'>
328319
</a>
329320
<a href='https://github.com/PrestaShop'>
330321
<img src='https://avatars.githubusercontent.com/u/2815696?s=42&v=4' title='PrestaShop'>
331322
</a>
332323
<a href='https://github.com/getsentry'>
333324
<img src='https://avatars.githubusercontent.com/u/1396951?s=42&v=4' title='Sentry'>
334325
</a>
326+
<a href='https://github.com/wikimedia'>
327+
<img src='https://avatars.githubusercontent.com/u/56668?s=42&v=4' title='Wikimedia'>
328+
</a>
335329
<a href='https://github.com/standardnotes'>
336330
<img src='https://avatars.githubusercontent.com/u/24537496?s=42&v=4' title='Standard Notes'>
337331
</a>
338332
<a href='https://github.com/woocommerce'>
339-
<img src='https://avatars.githubusercontent.com/u/473596?s=42&v=4' title='woocommerce'>
333+
<img src='https://avatars.githubusercontent.com/u/473596?s=42&v=4' title='WooCommerce'>
340334
</a>
341335
<a href='https://github.com/roots'>
342336
<img src='https://avatars.githubusercontent.com/u/4986074?s=42&v=4' title='Roots'>
@@ -372,7 +366,7 @@ new RemoveEmptyScriptsPlugin({
372366
## Also See
373367

374368
- [ansis][ansis] - The Node.js library for ANSI color styling of text in terminal.
375-
- [html-bundler-webpack-plugin][html-bundler-webpack-plugin] - The plugin handles HTML files from entry, extracts CSS, JS, images files from their sources used in HTML.
369+
- [html-bundler-webpack-plugin][html-bundler-webpack-plugin] - HTML bundler plugin for webpack handels a template as an entry point, extracts CSS and JS from their sources specified in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks and others "out of the box".
376370
- [pug-plugin][pug-plugin] - plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.
377371
- [pug-loader][pug-loader] - loader for Webpack renders Pug to HTML or template function. Optimized for using with Vue.
378372

‎package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webpack-remove-empty-scripts",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "Plugin for Webpack 5 to remove empty JavaScript files generated when using only styles in Webpack entry.",
55
"keywords": [
66
"webpack",
@@ -64,19 +64,19 @@
6464
"ansis": "1.5.2"
6565
},
6666
"devDependencies": {
67-
"@babel/core": "^7.18.13",
68-
"@babel/preset-env": "^7.18.10",
67+
"@babel/core": "^7.21.4",
68+
"@babel/preset-env": "^7.21.4",
6969
"@test-fixtures/lorem" : "0.0.2",
7070
"@types/jest": "^28.1.8",
71-
"@wordpress/scripts": "^23.4.0",
72-
"@wordpress/dependency-extraction-webpack-plugin": "^4.0.0",
73-
"css-loader": "^6.7.1",
74-
"html-loader": "^4.1.0",
71+
"@wordpress/scripts": "^23.7.2",
72+
"@wordpress/dependency-extraction-webpack-plugin": "^4.13.0",
73+
"css-loader": "^6.7.3",
74+
"html-loader": "^4.2.0",
7575
"jest": "^28.1.3",
76-
"mini-css-extract-plugin": "^2.6.1",
77-
"terser-webpack-plugin": "^5.3.6",
78-
"webpack": "^5.74.0",
79-
"webpack-hot-middleware": "^2.25.2",
76+
"mini-css-extract-plugin": "^2.7.5",
77+
"terser-webpack-plugin": "^5.3.7",
78+
"webpack": "^5.78.0",
79+
"webpack-hot-middleware": "^2.25.3",
8080
"webpack-manifest-plugin": "^5.0.0",
8181
"webpack-merge": "^5.8.0"
8282
}

‎src/index.d.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@ interface IOptions {
99
verbose: boolean;
1010
}
1111

12-
export type WebpackRemoveEmptyScriptsPluginOptions = Partial<IOptions>;
12+
declare namespace WebpackRemoveEmptyScriptsPlugin {
13+
export type Options = Partial<IOptions>;
14+
}
1315

1416
declare class WebpackRemoveEmptyScriptsPlugin implements WebpackPluginInstance {
1517
[index: string]: any;
1618

1719
public static STAGE_BEFORE_PROCESS_PLUGINS: number;
1820
public static STAGE_AFTER_PROCESS_PLUGINS: number;
1921

20-
constructor(options: WebpackRemoveEmptyScriptsPluginOptions);
22+
constructor(options: WebpackRemoveEmptyScriptsPlugin.Options);
2123

2224
apply(compiler: Compiler): void;
2325
}
2426

25-
export default WebpackRemoveEmptyScriptsPlugin;
27+
export = WebpackRemoveEmptyScriptsPlugin;

0 commit comments

Comments
 (0)