css-entry-webpack-plugin

!Build Statusplugin-travis-shieldplugin-travis-url !Licenseplugin-license-shieldplugin-npm-url
A Webpackwebpack-url plugin that simplifies creation of CSS-only bundles.

Installation

!NPM Versionplugin-npm-version-shieldplugin-npm-url !Dependency Statusplugin-npm-dependencies-shieldplugin-npm-dependencies-url
Install the plugin using npmnpm-url:

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

plugin-npm-url

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.