Extracted by mini css extract plugin export

MiniCssExtractPlugin

Disclaimer: MiniCssExtractPlugin is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack.

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

It builds on top of a new webpack v5 feature and requires webpack 5 to work.

Compared to the extract-text-webpack-plugin:

• Async loading
• No duplicate compilation (performance)
• Easier to use
• Specific to CSS

Getting Started

To begin, you’ll need to install mini-css-extract-plugin :

npm install --save-dev mini-css-extract-plugin

yarn add -D mini-css-extract-plugin

pnpm add -D mini-css-extract-plugin

It’s recommended to combine mini-css-extract-plugin with the css-loader

Then add the loader and the plugin to your webpack config. For example:

component.js

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [new MiniCssExtractPlugin()], module: < rules: [ < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], >, ], >, >;

⚠️ Note that if you import CSS from your webpack entrypoint or import styles in the initial chunk, mini-css-extract-plugin will not load this CSS into the page. Please use html-webpack-plugin for automatic generation link tags or create index.html file with link tag.

⚠️ Source maps works only for source-map / nosources-source-map / hidden-nosources-source-map / hidden-source-map values because CSS only supports source maps with the sourceMappingURL comment (i.e. //# sourceMappingURL=style.css.map ). If you need set devtool to another value you can enable source maps generation for extracted CSS using sourceMap: true for css-loader .

Options

Plugin Options

filename

type filename = | string | ((pathData: PathData, assetInfo?: AssetInfo) => string);

This option determines the name of each output CSS file.

chunkFilename

type chunkFilename = | string | ((pathData: PathData, assetInfo?: AssetInfo) => string);

Default: based on filename

Specifying chunkFilename as a function is only available in [email protected]

This option determines the name of non-entry chunk files.

ignoreOrder

type ignoreOrder = boolean;

Remove Order Warnings. See examples below for details.

insert

type insert = string | ((linkTag: HTMLLinkElement) => void);

Inserts the link tag at the given position for non-initial (async) CSS chunks

By default, the mini-css-extract-plugin appends styles ( elements) to document.head of the current window .

However in some circumstances it might be necessary to have finer control over the append target or even delay link elements insertion. For example this is the case when you asynchronously load styles for an application that runs inside of an iframe. In such cases insert can be configured to be a function or a custom selector.

If you target an iframe make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.

string

Allows to setup custom query selector. A new element will be inserted after the found item.

webpack.config.js

new MiniCssExtractPlugin(< insert: "#some-element", >);

A new element will be inserted after the element with id some-element .

function

Allows to override default behavior and insert styles at any position.

⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like let , const , arrow function expression and etc we recommend you to use only ECMA 5 features and syntax.

⚠ The insert function is serialized to string and passed to the plugin. This means that it won’t have access to the scope of the webpack configuration module.

webpack.config.js

new MiniCssExtractPlugin(< insert: function (linkTag) < var reference = document.querySelector("#some-element"); if (reference) < reference.parentNode.insertBefore(linkTag, reference); > >, >);

A new element will be inserted before the element with id some-element .

attributes

type attributes = Recordstring, string>>;

If defined, the mini-css-extract-plugin will attach given attributes with their values on element.

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< attributes: < id: "target", "data-target": "example", >, >), ], module: < rules: [ < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], >, ], >, >;

Note: It’s only applied to dynamically loaded css chunks, if you want to modify link attributes inside html file, please using html-webpack-plugin

linkType

type linkType = string | boolean;

This option allows loading asynchronous chunks with a custom link type, such as .

string

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< linkType: "text/css", >), ], module: < rules: [ < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], >, ], >, >;

boolean

false disables the link type attribute

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< linkType: false, >), ], module: < rules: [ < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], >, ], >, >;

runtime

Allows to enable/disable the runtime generation. CSS will be still extracted and can be used for a custom loading methods. For example, you can use assets-webpack-plugin to retrieve them then use your own runtime code to download assets when needed.

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< runtime: false, >), ], module: < rules: [ < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], >, ], >, >;

experimentalUseImportModule

type experimentalUseImportModule = boolean;

Enabled by default if not explicitly enabled (i.e. true and false allow you to explicitly control this option) and new API is available (at least webpack 5.52.0 is required). Boolean values are available since version 5.33.2 , but you need to enable experiments.executeModule (not required from webpack 5.52.0 ).

Use a new webpack API to execute modules instead of child compilers. This improves performance and memory usage a lot.

When combined with experiments.layers , this adds a layer option to the loader options to specify the layer of the css execution.

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< // You don't need this for `>= 5.52.0` due to the fact that this is enabled by default // Required only for `>= 5.33.2 & // Not available/unsafe for ` experimentalUseImportModule: true, >), ], module: < rules: [ < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], >, ], >, >;

Loader Options

publicPath

type publicPath = | string | ((resourcePath: string, rootContext: string) => string);

Default: the publicPath in webpackOptions.output

Specifies a custom public path for the external resources like images, files, etc inside CSS . Works like output.publicPath

string

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css", >), ], module: < rules: [ < test: /\.css$/, use: [ < loader: MiniCssExtractPlugin.loader, options: < publicPath: "/public/path/to/", >, >, "css-loader", ], >, ], >, >;

function

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [ new MiniCssExtractPlugin(< // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css", >), ], module: < rules: [ < test: /\.css$/, use: [ < loader: MiniCssExtractPlugin.loader, options: < publicPath: (resourcePath, context) => < return path.relative(path.dirname(resourcePath), context) + "/"; >, >, >, "css-loader", ], >, ], >, >;

emit

If true, emits a file (writes a file to the filesystem). If false, the plugin will extract the CSS but will not emit the file. It is often useful to disable this option for server-side packages.

esModule

By default, mini-css-extract-plugin generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.

You can enable a CommonJS syntax using:

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < plugins: [new MiniCssExtractPlugin()], module: < rules: [ < test: /\.css$/i, use: [ < loader: MiniCssExtractPlugin.loader, options: < esModule: false, >, >, "css-loader", ], >, ], >, >;

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/plugins/mini-css-extract-plugin

webpack 5.75

For production builds it’s recommended to extract the CSS from your bundle being able use parallel loading of CSS/JS resources later Do not use style-loader

In the past, one of webpack’s trade-offs when bundling was that each module your bundle would be wrapped individual function closures.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack html-loader and MiniCssExtractPlugin #789

webpack html-loader and MiniCssExtractPlugin #789

Comments

I’m using setup from getting-started webpack page:

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = < mode: 'development', entry: './src/index.js', devtool: 'inline-source-map', devServer: < contentBase: './dist', >, plugins: [ new HtmlWebpackPlugin(< title: 'Development', template: 'src/index.html' >), new MiniCssExtractPlugin(), ], output: < filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean: true //clean dist folder before each build >, module: < rules: [ < test: /\.html$/i, loader: 'html-loader', >, < test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], >, < test: /\.(png|svg|jpg|jpeg|gif|ico)$/i, type: 'asset/resource', >, < test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', >, ], >, >; 

And this one works OK if I include import ‘./style.css’; at the top of src/index.js . Inside of the produced dest/index.html I get the line where the extracted CSS style is generated as .

Now what I want is to remove that line import ‘./style.css’; at the top of src/index.js and use instead of that one that I will place inside the template src/index.html .

When doing this, generated dest/index.html gets correctly the line and the file dest/b88d04fba731603756b1.css is generated, but it’s content is wrong as I get this instead of real css styles:

// extracted by mini-css-extract-plugin export <>; 

Is there a way to use html-loader plugin together with MiniCssExtractPlugin , so that I do not need to import css inside js files but instead import it inside html template?

The text was updated successfully, but these errors were encountered:

Источник