webdiscus
webpack-remove-empty-scripts
The problem this plugin solves
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 fileThis 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.
Install
npm install webpack-remove-empty-scripts --save-devUsage with mini-css-extract-plugin
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.
Usage with html-webpack-plugin
✅ 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
Highlights of html-bundler-webpack-plugin
- 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.
Simple usage example
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.
};Options
enabled
Type: boolean Default: true
Enable / disable the plugin.
Tip: Use disable for development to improve performance.
stage
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.
extensions
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.
ignore
Type: string | RegExp | string[] | RegExp[] Default: null
Ignore source files.
remove
Type: RegExp Default: /\.(js|mjs)$/
Remove generated scripts.
verbose
Type: boolean Default: false
Show process information.
Recipes
Show logs to console by development
const isProduction = process.env.NODE_ENV === 'production';
new RemoveEmptyScriptsPlugin({ verbose: isProduction !== true })Disable plugin by development to improve performance
const isProduction = process.env.NODE_ENV === 'production';
new RemoveEmptyScriptsPlugin({ enabled: isProduction === true })Specify stage for properly work some plugins
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
}),
],
};Identify only .foo and .bar extensions as styles
new RemoveEmptyScriptsPlugin({ extensions: /\.(foo|bar)$/ })Usage a javascript entry to styles
Give an especial extension to your file, for example .css.js:
new RemoveEmptyScriptsPlugin({ extensions: /\.(css.js)$/ })Remove generated scripts *.js *.mjs except *.rem.js *.rem.mjs
new RemoveEmptyScriptsPlugin({ remove: /(?<!\.rem)\.(js|mjs)$/ })Recursive ignore all js files from directory, for example my-workers/
new RemoveEmptyScriptsPlugin({
ignore: [
/my-workers\/.+\.js$/,
]
})Usage webpack-hot-middleware
new RemoveEmptyScriptsPlugin({
ignore: [
'webpack-hot-middleware',
]
})Testing
npm run test will run the unit and integration tests.\
npm run test:coverage will run the tests with coverage.
Who use this plugin
Also See
- 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.