css-entry-webpack-plugin

CSS Entry Plugin

A Webpack plugin that simplifies creation of CSS-only bundles.

Installation

Install the plugin using npm:

$ npm install css-entry-webpack-plugin --save-dev

Basic Usage

The plugin will identify the entries that contain only CSS resources and will generate CSS bundles for them.

webpack.config.js

const CssEntryPlugin = require("css-entry-webpack-plugin");
 
module.exports = {
  entry: {
    "styles": ["src/style1.css", "src/style2.css"],
    "main": "src/index.js"
  },
  output: {
    path: "dist",
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      // This is required
      {
        test: /\.css$/,
        use: "css-loader"
      }
    ]
  },
  plugins: [
    new CssEntryPlugin({
      output: {
        filename: "[name].bundle.css"
      }
    })
  ]
};

will output two files

main.bundle.js and styles.bundle.css

API

new CssEntryPlugin(options: String | Object)

options

Type: String | Function | Object
Optional

Specifies the options for the CssEntryPlugin.

The shorthand version allows you to specify the output.filename directly as a String or a Function, this will be equivalent to passing an object with output.filename. See output.filename for details on the possible values.

new CssEntryPlugin(/* option: String | Function */)
// is equivalent to
new CssEntryPlugin({
  output: {
    filename: /* option */
  }
})

When specified as an Object, the following options are available:

output

Type: Object
Optional

Specifies a set of options instructing the plugin on how and where to output your CSS bundles. It works in a similar fashion to Webpack's output option.

new CssEntryPlugin({
  output: { /* output options */ }
})

output.filename

Type: String | Function
Default: [name].css
Optional

This option determines the name of each CSS output bundle. The bundle is written to the directory specified by the Webpack output.path option. It works in a similar fashion to Webpack's output.filename option and ExtractTextPlugin's filename option.

For a single entry point, this can be a static name.

filename: "bundle.css"

However, when creating multiple bundles via more than one entry point, you should use a template string with one of the following substitutions to give each bundle a unique name.

Using the entry name:

filename: "[name].bundle.css"

Using the internal chunk id:

filename: "[id].bundle.css"

The following substitutions are available in template strings:

Substitution	Description
[name]	The module name or name of the chunk
[id]	The number of the chunk or module identifier
[contenthash]	The hash of the content of the extracted file

Any combination of these substitutions is allowed (eg. "[name].[id].css").

The option can also be specified as a Function which should return the filename as a string without substitutions.

filename: function (getPath /* (template: string) => string */) {
  return "prefix-" + getPath("[name].[id].css");
}

The Function has the signature (getPath: ((template: string) => string)) => string where getPath is a function passed as the first argument, that can be used to perform the substitutions on a given template string to retrieve the original path.

Note this option is called filename but you are still allowed to use or return something like "css/[name]/bundle.css" to create a folder structure.

Note this option only affects CSS output files for entries matched by this plugin (CSS entries).

entries

Type: String | String[] | RegExp | Function
Optional and mutually exclusive with ignoreEntries

Specifies the entry or entries to consider as possible CSS entries. Other entries will be ignored.

ignoreEntries

Type: String | String[] | RegExp | Function
Optional and mutually exclusive with entries

Specifies the entry or entries to ignore. Other entries will be considered as possible CSS entries.

extensions

Type: String | String[]
Default: [".css", ".scss", ".less", ".styl"]
Optional and mutually exclusive with test

Specifies which file extensions are valid for files/resources inside considered CSS entries.

test

Type: RegExp | Function
Optional and mutually exclusive with extensions

Specifies which files/resources are valid for considered CSS entries.

disable

Type: Boolean
Default: false
Optional

Disables the plugin.