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 = ; moduleexports = 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: output: filename: "[name].bundle.css" ;
will output two files
main.bundle.js
and styles.bundle.css
API
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.
/* option: String | Function */// is equivalent to 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.
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.
{ return "prefix-" + ;}
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.