TypeScript icon, indicating that this package has built-in type declarations

1.0.0-beta.4 • Public • Published

CSS Entry Plugin

Build Status License

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


NPM Version Dependency Status

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.


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


new CssEntryPlugin(options: String | Object)


Type: String | Function | Object

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:


Type: Object

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 */ }

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

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).


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.


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.


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.


Type: RegExp | Function
Optional and mutually exclusive with extensions

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


Type: Boolean
Default: false

Disables the plugin.

Package Sidebar


Weekly Downloads






Last publish


  • cristian.toma