A Webpack plugin that allows CSS files as the entry.

Downloads in past


40171.0.0-beta.46 years ago6 years agoMinified + gzip package size for css-entry-webpack-plugin in KB


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


!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


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.