Webpack plugin to solve the problem of having a style only entry (css/sass/less) generating an extra js file.
This is a small plugin developed to solve the problem of having a style only entry (css/sass/less/stylus) generating an extra js file.
:warning: The current package version is not compatible with webpack 5. There is a fork here that is compatible: https://github.com/webdiscus/webpack-remove-empty-scripts
You can find more info by reading the following issues:
It just find js files from chunks of css only entries and remove the js file from the compilation.
install using your package manager of choice: - npm:
npm install -D webpack-fix-style-only-entries- yarn:
yarn add -D webpack-fix-style-only-entries
Require and add to webpack.config plugins.
Warning: this plugin does not load styles or split your bundles, it just fix chunks of css only entries by removing the (almost) empty js file.
// ... other plugins const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");module.exports = { entry: { "main" : "./app/main.js" "styles": ["./common/styles.css", "./app/styles.css"] }, module: { { test: /.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ] }, ] }, plugins: [ new FixStyleOnlyEntriesPlugin(), new MiniCssExtractPlugin({ filename: "[name].[chunkhash:8].css", }), ], };
| Name | Type | Default | Description | |------------|--------------- |----------------------------------------|-------------| | extensions | Array[string] | ["less", "scss", "css", "styl","sass"] | file extensions for styles | | silent | boolean | false | supress logs to console | | ignore | string or RegExp | undefined | match resource to be ignored |
// to identify only 'foo' and 'bar' extensions as styles new FixStyleOnlyEntriesPlugin({ extensions:['foo', 'bar'] }),
Give an especial extension to your file (
.css.jsfor example) and configure
new FixStyleOnlyEntriesPlugin({ extensions:['css.js'] }). See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/8.
Configure this plugin as
new FixStyleOnlyEntriesPlugin({ ignore: 'webpack-hot-middleware' }). See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/12 and https://github.com/fqborges/webpack-fix-style-only-entries/blob/master/test/cases/css-entry-with-ignored-hmr/webpack.config.js.