webpack-remove-empty-scripts
Advanced tools
Webpack plugin removes empty JavaScript files generated when using styles.
The webpack-remove-empty-scripts package is a plugin for Webpack that helps to remove empty scripts generated during the build process. This can be particularly useful when using tools like MiniCssExtractPlugin, which can sometimes generate empty JavaScript files when only CSS is being extracted.
Remove Empty Scripts
This feature allows you to remove empty JavaScript files that are generated during the Webpack build process. By including the RemoveEmptyScriptsPlugin in your Webpack configuration, you can ensure that any empty scripts are automatically removed, keeping your build output clean.
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
module.exports = {
plugins: [
new RemoveEmptyScriptsPlugin(),
],
};The clean-webpack-plugin is used to remove/clean your build folder(s) before building. While it doesn't specifically target empty scripts, it helps in keeping the build directory clean by removing old files. This can indirectly help in managing unnecessary files but does not specifically address the issue of empty scripts.
The webpack-shell-plugin-next allows you to run shell commands before or after Webpack builds. You could use this to run a script that removes empty files, but it requires additional setup and scripting compared to the more focused webpack-remove-empty-scripts plugin.
Webpack generates a JS file for each resource defined in the entry option.
For example, you have a style file in the entry option:
module.exports = {
entry: {
styles: './styles.scss',
},
}
The following files are generated in the output directory:
dist/styles.css
dist/styles.js // <= unexpected empty JS file
This plugin removes generated empty JS files.
Warning
This plugin is the
Emergency Crutch🩼 for the mini-css-extract-plugin issue.
Themini-css-extract-pluginextract CSS, but not eliminate a generated empty JS file.
Note
This plugin is compatible with
Webpack 5. ForWebpack 4use webpack-fix-style-only-entries.
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: [
// 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
<script> and <link>.href src srcset etc.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.
};
enabledType: boolean Default: true
Enable / disable the plugin.
Tip: Use disable for development to improve performance.
stageType: number
Values:
RemoveEmptyScriptsPlugin.STAGE_BEFORE_PROCESS_PLUGINS (default)before processing other plugins.webpack-manifest-plugin.RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINSafter processing all other plugins.@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.
extensionsType: 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.
ignoreType: string | RegExp | string[] | RegExp[] Default: null
Ignore source files.
removeType: RegExp Default: /\.(js|mjs)$/
Remove generated scripts.
verboseType: 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
}),
],
};
.foo and .bar extensions as stylesnew RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ })
Give an especial extension to your file, for example .css.js:
new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ })
*.js *.mjs except *.rem.js *.rem.mjsnew RemoveEmptyScriptsPlugin({ remove: /(?<!\.rem)\.(js|mjs)$/ })
my-workers/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.
1.0.4 (2023-08-28)
verbose option is enabledFAQs
Webpack plugin removes empty JavaScript files generated when using styles.
The npm package webpack-remove-empty-scripts receives a total of 144,518 weekly downloads. As such, webpack-remove-empty-scripts popularity was classified as popular.
We found that webpack-remove-empty-scripts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.