A Webpack plugin to remove empty JavaScript files generated when using style only entries.
By default, Webpack creates a JavaScript file for every entry specified in the entry option - even when the entry is a style file (like SCSS or CSS).
Example:
module.exports = {
entry: {
styles: './styles.scss',
},
}Output:
dist/styles.css
dist/styles.js // <= unwanted empty JS file
When using mini-css-extract-plugin, CSS is correctly extracted into a separate file, but Webpack still emits an empty JavaScript file for each style-only entry - the known issue.
This plugin detects and removes those redundant .js files automatically, keeping your output clean.
Note
This plugin is compatible with Webpack 5.
For Webpack 4 use webpack-fix-style-only-entries.
npm install webpack-remove-empty-scripts --save-devThe 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: [
// removes the empty `.js` files generated by webpack
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
],
};See the plugin options.
âś… It is recommended to use the new powerful html-bundler-webpack-plugin instead of:
- html-webpack-plugin
- mini-css-extract-plugin
- webpack-remove-empty-scripts
- Prevents generating unexpected empty JS files.
- An entry point can be an HTML template.
- Source scripts and styles can be specified directly in HTML using
<script>and<link>. - Extracts JS and CSS from their sources specified in HTML.
- Resolving source assets specified in standard attributes
hrefsrcsrcsetetc. - Inline JS, CSS, SVG, PNG without additional plugins and loaders.
- Support for template engines such as Eta, EJS, Handlebars, Nunjucks, LiquidJS and others.
Add source scripts and styles directly to HTML:
<html>
<head>
<!-- specify source styles -->
<link href="./style.scss" rel="stylesheet">
<!-- specify source scripts here and/or in body -->
<script src="./main.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<!-- specify source images -->
<img src="./logo.png">
</body>
</html>The generated HTML contains the output filenames of the processed assets:
<html>
<head>
<link href="assets/css/style.05e4dd86.css" rel="stylesheet">
<script src="assets/js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<img src="assets/img/logo.58b43bd8.png">
</body>
</html>Add the HTML templates in the entry option:
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
// define a relative or absolute path to template pages
entry: 'src/views/',
// OR define templates manually
entry: {
index: 'src/views/home.html', // => dist/index.html
'news/sport': 'src/views/news/sport/index.html', // => dist/news/sport.html
},
}),
],
// ... loaders for styles, images, etc.
};Type: boolean Default: true
Enable / disable the plugin.
Tip: Use disable for development to improve performance.
Type: number
Values:
RemoveEmptyScriptsPlugin.STAGE_BEFORE_PROCESS_PLUGINS(default)
Remove empty scriptsbeforeprocessing other plugins.
For example, exact this stage needs for properly work of thewebpack-manifest-plugin.RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
Remove empty scriptsafterprocessing all other plugins.
For example, exact this stage needs for properly work of the@wordpress/dependency-extraction-webpack-plugin.
Webpack plugins use different stages for their functionality.
For properly work other plugins can be specified the stage when should be removed empty scripts: before or after processing of other Webpack plugins.
See usage example.
Warning
Because
webpack-manifest-pluginand@wordpress/dependency-extraction-webpack-pluginneeds different stages both plugins can't be used together withRemoveEmptyScriptsPluginat one configuration.
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.
Search for empty js files in source files only with these extensions.
Type: string | RegExp | string[] | RegExp[] Default: null
Ignore source files.
Type: RegExp Default: /\.(js|mjs)$/
Remove generated scripts.
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 })For example, using @wordpress/dependency-extraction-webpack-plugin the empty scripts must be removed after processing all plugins.
const path = require('path');
const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
output: {
path: path.join(__dirname, 'public'),
},
entry: {
'main': './src/sass/main.scss',
},
module: {
rules: [
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
new DependencyExtractionWebpackPlugin(),
new RemoveEmptyScriptsPlugin({
stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS, // <- use this option
}),
],
};new RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ })Give an especial extension to your file, for example .css.js:
new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ })new RemoveEmptyScriptsPlugin({ remove: /(?<!\.rem)\.(js|mjs)$/ })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.
- ansis - The Node.js library for ANSI color styling of text in terminal.
- 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".
- pug-plugin - plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug.
- pug-loader - loader for Webpack renders Pug to HTML or template function. Optimized for using with Vue.
