|
1 | | -[](https://www.npmjs.com/package/webpack-remove-empty-scripts) |
| 1 | +[](https://www.npmjs.com/package/webpack-remove-empty-scripts/v/0.7.2) |
| 2 | +[](https://nodejs.org) |
| 3 | +[](https://webpack.js.org/) |
| 4 | +[](https://codecov.io/gh/webdiscus/webpack-remove-empty-scripts) |
| 5 | +[](https://www.npmjs.com/package/webpack-remove-empty-scripts) |
2 | 6 |
|
3 | 7 | # [webpack-remove-empty-scripts](https://www.npmjs.com/package/webpack-remove-empty-scripts) |
4 | 8 |
|
5 | 9 |
|
6 | | -The plugin remove empty scripts generated by usage only a style (css/scss/sass/less/stylus) without a js script in entry. |
| 10 | +The plugin removes empty `js` scripts generated when using only the styles like `css` `scss` `sass` `less` `stylus` in the webpack entry. |
7 | 11 |
|
8 | | -You can find more info by reading the following issues: |
| 12 | +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.\ |
| 13 | +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). |
9 | 14 |
|
10 | | - - https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518 |
11 | | - - https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151 |
| 15 | +The plugin support only `Webpack 5`. |
| 16 | +For `Webpack 4` use original [plugin](https://github.com/fqborges/webpack-fix-style-only-entries). |
12 | 17 |
|
13 | | -This is a fork of original plugin https://github.com/fqborges/webpack-fix-style-only-entries (ver. 0.6.0). |
14 | | -In this fork fixed some deprecation messages and integration tests for Webpack 5. See the details in [changelog](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/CHANGELOG.md#061-oct-20-2020). |
| 18 | +## Description of the problem |
15 | 19 |
|
16 | | -The plugin support only **Webpack 5** using new ChunkGraph and ModuleGraph APIs. |
17 | | -For **Webpack 4** use original [plugin](https://github.com/fqborges/webpack-fix-style-only-entries). |
| 20 | +Webpack generates a js file for each resource defined in a webpack entry. |
| 21 | +Some extract plugins use webpack entry to define non-js resources. |
| 22 | +For example, in webpack entry might be defined resources like js, css, scss, html, pug, etc. |
| 23 | +Each resource type needs its own extract plugin and loader. Such a extract plugin should take care of eliminating the phantom js files for non-js resources by self. |
| 24 | +But the `mini-css-extract-plugin` not do it. |
| 25 | +This plugin fixes this, finds and removes phantom js files for non-js resources. |
18 | 26 |
|
19 | | -View on: [GitHub](https://github.com/webdiscus/webpack-remove-empty-scripts), [npmjs](https://www.npmjs.com/package/webpack-remove-empty-scripts) |
| 27 | +```js |
| 28 | +module.exports = { |
| 29 | + entry: { |
| 30 | + main: './main.js', // the generated `main.js` is what we expect |
| 31 | + styles: './main.scss', // will be generated the expected `styles.css` and the unexpected `styles.js` |
| 32 | + }, |
| 33 | + // ... |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +You can find more info by the following issues: |
| 38 | + |
| 39 | + - [extract-text-webpack-plugin issue](https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518) |
| 40 | + - [mini-css-extract-plugin issue](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151) |
| 41 | + |
| 42 | +## NEW |
| 43 | +> The `experimental` version `^0.8.0` has **_new improved and fast algorithm_** to detect generated needless empty js files.\ |
| 44 | +> Please test your project before using it in production.\ |
| 45 | +> If you have a problem with the new version, please create a [new issue](https://github.com/webdiscus/webpack-remove-empty-scripts/issues). |
| 46 | +
|
| 47 | +> :warning: The last stable release version is `0.7.2` in the branch [`stable`](https://github.com/webdiscus/webpack-remove-empty-scripts/tree/stable). |
| 48 | +
|
| 49 | +## Propose |
| 50 | +If you use the `mini-css-extract-plugin` only to extract `css` files from styles defined in webpack entry |
| 51 | +like `scss` `sass` `less` `stylus` then try to use **new entry extract plugin** - [pug-plugin](https://github.com/webdiscus/pug-plugin). |
| 52 | + |
| 53 | +The `pug-plugin`: |
| 54 | + |
| 55 | +- extract HTML and CSS from `pug` `html` `scss` resources defined in `webpack entry` |
| 56 | +- doesn't need any fix plugins like `webpack-remove-empty-scripts`, because it doesn't generate empty `js` files |
| 57 | +- is very flexible and fast |
| 58 | + |
| 59 | +Improve performance with `pug-plugin`. Using the `pug-plugin` for `pug` `html` `scss` etc in the `webpack entry` no longer requires additional plugins such as: |
| 60 | +- [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) |
| 61 | +- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) |
| 62 | +- [webpack-remove-empty-scripts](https://github.com/webdiscus/webpack-remove-empty-scripts) (bug fix plugins for `mini-css-extract-plugin`) |
| 63 | +- [pug-loader](https://github.com/webdiscus/pug-loader) (this loader is already included in the `pug-plugin`) |
20 | 64 |
|
21 | | -## How to use |
22 | | -Install `npm install -D webpack-remove-empty-scripts`. |
| 65 | +For example, `webpack.config.js` |
| 66 | +```js |
| 67 | +const PugPlugin = require('pug-plugin'); |
| 68 | +module.exports = { |
| 69 | + entry: { |
| 70 | + 'main': 'main.js', |
| 71 | + 'styles': 'styles.scss', |
| 72 | + 'index': 'index.html', // now is possible define HTML file in entry |
| 73 | + 'page01': 'page01.pug', // now is possible define PUG file in entry |
| 74 | + // ... |
| 75 | + }, |
| 76 | + plugins: [ |
| 77 | + new PugPlugin(), // supports zero config using default webpack output options |
| 78 | + ] |
| 79 | + // ... |
| 80 | +}; |
| 81 | +``` |
| 82 | +> The plugin can be used not only for `pug` but also for simply extracting `HTML` or `CSS` from `webpack entry`, independent of pug usage. |
23 | 83 |
|
24 | | -Require and add to webpack.config plugins. |
| 84 | +For more examples see the [pug-plugin](https://github.com/webdiscus/pug-plugin). |
| 85 | + |
| 86 | +## Install |
| 87 | +```console |
| 88 | +npm install webpack-remove-empty-scripts --save-dev |
| 89 | +``` |
25 | 90 |
|
| 91 | +## Usage |
| 92 | +The example of webpack.config.js: |
26 | 93 | ```javascript |
27 | 94 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
28 | 95 | const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); |
@@ -53,28 +120,85 @@ module.exports = { |
53 | 120 | ``` |
54 | 121 |
|
55 | 122 | ## Options |
56 | | - |
57 | | -| Name | Type | Default | Description | |
58 | | -|------------|------------------|-----------------------------------------|-------------| |
59 | | -| verbose | boolean | false | show logs to console | |
60 | | -| extensions | Array[string] | ['css', 'scss', 'sass', 'less', 'styl'] | file extensions for styles | |
61 | | -| ignore | string or RegExp or Array[string] or Array[RegExp] | | match resource path to be ignored | |
62 | | - |
63 | | -### Example config: |
| 123 | + |
| 124 | +### `enabled` |
| 125 | +Type: `boolean` Default: `true`<br> |
| 126 | +Enable / disable the plugin. |
| 127 | +**Tip:** Use `disable` for development to improve performance. |
| 128 | + |
| 129 | +### `extensions` |
| 130 | +Type: `RegExp` Default: `/\.(css|scss|sass|less|styl)([?].*)?$/` |
| 131 | +Note: the Regexp should have the query part at end `([?].*)?$` to match assets like `style.css?key=val` <br> |
| 132 | +Type: `string[]` Default: `['css', 'scss', 'sass', 'less', 'styl']`. It is automatically converted to type `RegExp`. |
| 133 | + |
| 134 | +### `ignore` |
| 135 | +Type: `string | RegExp | string[] | RegExp[]` Default: `null`<br> |
| 136 | +Match resource path to be ignored. |
| 137 | + |
| 138 | +### `verbose` |
| 139 | +Type: `boolean` Default: `false`<br> |
| 140 | +Show process information. |
| 141 | + |
| 142 | +## Recipes |
| 143 | + |
| 144 | +### Show logs to console by development |
64 | 145 | ```JavaScript |
65 | | -// show logs to console, use it for development |
66 | | -new RemoveEmptyScriptsPlugin({ verbose: true }) |
| 146 | +const isProduction = process.env.NODE_ENV === 'production'; |
| 147 | +new RemoveEmptyScriptsPlugin({ verbose: isProduction !== true }) |
67 | 148 | ``` |
68 | 149 |
|
| 150 | +### Disable plugin by development to improve performance |
69 | 151 | ```JavaScript |
70 | | -// to identify only 'foo' and 'bar' extensions as styles |
71 | | -new RemoveEmptyScriptsPlugin({ extensions:['foo', 'bar'] }) |
| 152 | +const isProduction = process.env.NODE_ENV === 'production'; |
| 153 | +new RemoveEmptyScriptsPlugin({ enabled: isProduction === true }) |
72 | 154 | ``` |
73 | 155 |
|
74 | | -## Recipes |
| 156 | +### Identify only `.foo` and `.bar` extensions as styles |
| 157 | + |
| 158 | +```JavaScript |
| 159 | +new RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ }) |
| 160 | +``` |
| 161 | + |
| 162 | +### Usage a javascript entry to styles |
| 163 | +Give an especial extension to your file, for example `.css.js`: |
| 164 | +```JavaScript |
| 165 | +new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ }) |
| 166 | +``` |
| 167 | + |
| 168 | +### Recursive ignore all js files from directory, for example `my-workers/` |
| 169 | +```JavaScript |
| 170 | +new RemoveEmptyScriptsPlugin({ |
| 171 | + ignore: [ |
| 172 | + /my-workers\/.+\.js$/, |
| 173 | + ] |
| 174 | +}) |
| 175 | +``` |
| 176 | + |
| 177 | +### Usage webpack-hot-middleware |
| 178 | +```JavaScript |
| 179 | +new RemoveEmptyScriptsPlugin({ |
| 180 | + ignore: [ |
| 181 | + 'webpack-hot-middleware', |
| 182 | + ] |
| 183 | +}) |
| 184 | +``` |
| 185 | +[See the test case](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js). |
| 186 | + |
| 187 | +## Testing |
| 188 | + |
| 189 | +`npm run test` will run the unit and integration tests.\ |
| 190 | +`npm run test:coverage` will run the tests with coverage. |
| 191 | + |
| 192 | +## Also See |
| 193 | + |
| 194 | +- more examples of usages see in [test cases](https://github.com/webdiscus/pug-plugin/tree/master/test/cases) |
| 195 | +- [`pug-plugin`][pug-plugin] |
| 196 | +- [`pug-loader`][pug-loader] |
75 | 197 |
|
76 | | -### I use a javascript entry to styles: |
77 | | -Give an especial extension to your file (`.css.js` for example) and configure `new RemoveEmptyScriptsPlugin({ extensions:['css.js'] })`. |
| 198 | +## License |
| 199 | +[ISC](https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/LICENSE) |
78 | 200 |
|
79 | | -### I use webpack-hot-middleware: |
80 | | -Configure this plugin as `new RemoveEmptyScriptsPlugin({ ignore: 'webpack-hot-middleware' })`. See: https://github.com/webdiscus/webpack-remove-empty-scripts/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js |
| 201 | +<!-- prettier-ignore-start --> |
| 202 | +[pug-plugin]: https://github.com/webdiscus/pug-plugin |
| 203 | +[pug-loader]: https://github.com/webdiscus/pug-loader |
| 204 | +<!-- prettier-ignore-end --> |
0 commit comments