All Projects → fqborges → Webpack Fix Style Only Entries

fqborges / Webpack Fix Style Only Entries

Licence: isc
Webpack plugin to solve the problem of having a style only entry (css/sass/less) generating an extra js file.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Webpack Fix Style Only Entries

Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+449.6%)
Mutual labels:  webpack, plugin
Webpack Internal Plugin Relation
🔎 a tiny tool to show the relation of webpack internal plugins & hooks
Stars: ✭ 135 (-46%)
Mutual labels:  webpack, plugin
Sounds Webpack Plugin
🔊Notify or errors, warnings, etc with sounds
Stars: ✭ 125 (-50%)
Mutual labels:  webpack, plugin
Award
⚙基于react的服务端渲染框架
Stars: ✭ 91 (-63.6%)
Mutual labels:  webpack, plugin
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-24.4%)
Mutual labels:  webpack, plugin
Cypress Webpack Preprocessor
Cypress preprocessor for bundling JavaScript via webpack
Stars: ✭ 93 (-62.8%)
Mutual labels:  webpack, plugin
Webpack Plugin Hash Output
Plugin to replace webpack chunkhash with an md5 hash of the final file conent.
Stars: ✭ 128 (-48.8%)
Mutual labels:  webpack, plugin
Prepack Webpack Plugin
A webpack plugin for prepack.
Stars: ✭ 1,054 (+321.6%)
Mutual labels:  webpack, plugin
Webpack Deadcode Plugin
Webpack plugin to detect unused files and unused exports in used files
Stars: ✭ 180 (-28%)
Mutual labels:  webpack, plugin
Webpack Fast Refresh
React Fast Refresh plugin and loader for webpack
Stars: ✭ 155 (-38%)
Mutual labels:  webpack, plugin
Serverless Plugin Webpack
Serverless Plugin Webpack
Stars: ✭ 72 (-71.2%)
Mutual labels:  webpack, plugin
Webpackmonitor
A tool for monitoring webpack optimization metrics through the development process
Stars: ✭ 2,432 (+872.8%)
Mutual labels:  webpack, plugin
Stylable
Stylable - CSS for components
Stars: ✭ 1,109 (+343.6%)
Mutual labels:  webpack, style
Fork Ts Checker Webpack Plugin
Webpack plugin that runs typescript type checker on a separate process.
Stars: ✭ 1,343 (+437.2%)
Mutual labels:  webpack, plugin
Craco Alias
A craco plugin for automatic aliases generation for Webpack and Jest
Stars: ✭ 56 (-77.6%)
Mutual labels:  webpack, plugin
Webapp Webpack Plugin
[DEPRECATED] use favicons-webpack-plugin instead
Stars: ✭ 127 (-49.2%)
Mutual labels:  webpack, plugin
Webpack Alioss Plugin
阿里 oss-webpack 自动上传插件
Stars: ✭ 35 (-86%)
Mutual labels:  webpack, plugin
Dotenv Webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Stars: ✭ 1,022 (+308.8%)
Mutual labels:  webpack, plugin
Speed Measure Webpack Plugin
⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds
Stars: ✭ 1,980 (+692%)
Mutual labels:  webpack, plugin
Style Resources Loader
CSS processor resources loader for webpack
Stars: ✭ 214 (-14.4%)
Mutual labels:  webpack, style

npm version

webpack-fix-style-only-entries

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.

⚠️ 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:

View on: Github - npm

How it works

It just find js files from chunks of css only entries and remove the js file from the compilation.

How to use

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",
        }),
    ],
};

Options

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

Example config:

// to identify only 'foo' and 'bar' extensions as styles
new FixStyleOnlyEntriesPlugin({ extensions:['foo', 'bar'] }),

Recipes

I use a javascript entry to styles:

Give an especial extension to your file (.css.js for example) and configure new FixStyleOnlyEntriesPlugin({ extensions:['css.js'] }). See: https://github.com/fqborges/webpack-fix-style-only-entries/issues/8.

I use webpack-hot-middleware:

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].