The plugin removes empty js
scripts generated when using only the styles like css
scss
sass
less
stylus
in the webpack entry.
This is improved fork of original plugin webpack-fix-style-only-entries ver. 0.6.0.
This fork fixes some deprecation messages and some issues in React. See the details in changelog.
The plugin support only Webpack 5
.
For Webpack 4
use original plugin.
Webpack generates a js file for each resource defined in a webpack entry.
Some extract plugins use webpack entry to define non-js resources.
For example, in webpack entry might be defined resources like js, css, scss, html, pug, etc.
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.
But the mini-css-extract-plugin
not do it.
This plugin fixes this, finds and removes phantom js files for non-js resources.
module.exports = {
entry: {
main: './main.js', // the generated `main.js` is what we expect
styles: './main.scss', // will be generated the expected `styles.css` and the unexpected `styles.js`
},
// ...
}
You can find more info by the following issues:
The
experimental
version^0.8.0
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.
⚠️ The last stable release is0.7.2
in the branchstable
.
If you use the mini-css-extract-plugin
only to extract css
files from styles defined in webpack entry
like scss
sass
less
stylus
then try to use new entry extract plugin - pug-plugin.
The pug-plugin
:
- extract HTML and CSS from
pug
html
scss
resources defined inwebpack entry
- doesn't need any fix plugins like
webpack-remove-empty-scripts
, because it doesn't generate emptyjs
files - is very flexible and fast
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:
- html-webpack-plugin
- mini-css-extract-plugin
- webpack-remove-empty-scripts (bug fix plugins for
mini-css-extract-plugin
) - pug-loader (this loader is already included in the
pug-plugin
)
For example, webpack.config.js
const PugPlugin = require('pug-plugin');
module.exports = {
entry: {
'main': 'main.js',
'styles': 'styles.scss',
'index': 'index.html', // now is possible define HTML file in entry
'page01': 'page01.pug', // now is possible define PUG file in entry
// ...
},
plugins: [
new PugPlugin(), // supports zero config using default webpack output options
]
// ...
};
The plugin can be used not only for
pug
but also for simply extractingHTML
orCSS
fromwebpack entry
, independent of pug usage.
For more examples see the pug-plugin.
npm install webpack-remove-empty-scripts --save-dev
The example of webpack.config.js:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
entry: {
'main' : './app/main.js',
'styles': ['./common/styles.css', './app/styles.css']
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
},
]
},
plugins: [
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
],
};
Type: boolean
Default: true
Enable / disable the plugin.
Tip: Use disable
for development to improve performance.
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
Type: string[]
Default: ['css', 'scss', 'sass', 'less', 'styl']
. It is automatically converted to type RegExp
.
Type: string | RegExp | string[] | RegExp[]
Default: null
Match resource path to be ignored.
Type: boolean
Default: false
Show process information.
const isProduction = process.env.NODE_ENV === 'production';
new RemoveEmptyScriptsPlugin({ verbose: isProduction !== true })
const isProduction = process.env.NODE_ENV === 'production';
new RemoveEmptyScriptsPlugin({ enabled: isProduction === true })
new RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ })
Give an especial extension to your file, for example .css.js
:
new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ })
new RemoveEmptyScriptsPlugin({
ignore: [
/my-workers\/.+\.js$/,
]
})
new RemoveEmptyScriptsPlugin({
ignore: [
'webpack-hot-middleware',
]
})
npm run test
will run the unit and integration tests.
npm run test:coverage
will run the tests with coverage.
- more examples of usages see in test cases
pug-plugin
pug-loader