Webpack css import loader

Loaders

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.

Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration – see configuration.

Files

• val-loader Executes code as module and consider exports as JS code
• ref-loader Create dependencies between any files manually

JSON

Transpiling

• babel-loader Loads ES2015+ code and transpiles to ES5 using Babel
• esbuild-loader Loads ES2015+ code and transpiles to ES6+ using esbuild
• buble-loader Loads ES2015+ code and transpiles to ES5 using Bublé
• traceur-loader Loads ES2015+ code and transpiles to ES5 using Traceur
• ts-loader Loads TypeScript 2.0+ like JavaScript
• coffee-loader Loads CoffeeScript like JavaScript
• fengari-loader Loads Lua code using fengari
• elm-webpack-loader Loads Elm like JavaScript

Templating

• html-loader Exports HTML as string, require references to static resources
• pug-loader Loads Pug and Jade templates and returns a function
• markdown-loader Compiles Markdown to HTML
• react-markdown-loader Compiles Markdown to a React Component using the markdown-parse parser
• posthtml-loader Loads and transforms a HTML file using PostHTML
• handlebars-loader Compiles Handlebars to HTML
• markup-inline-loader Inline SVG/MathML files to HTML. It’s useful when applying icon font or applying CSS animation to SVG.
• twig-loader Compiles Twig templates and returns a function
• remark-loader Load markdown through remark with built-in image resolution

Styling

• style-loader Add exports of a module as style to DOM
• css-loader Loads CSS file with resolved imports and returns CSS code
• less-loader Loads and compiles a LESS file
• sass-loader Loads and compiles a SASS/SCSS file
• postcss-loader Loads and transforms a CSS/SSS file using PostCSS
• stylus-loader Loads and compiles a Stylus file

Frameworks

Awesome

For more third-party loaders, see the list from awesome-webpack.

Источник

Loaders

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Example

For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. To do this, you would start by installing the loaders you need:

npm install --save-dev css-loader ts-loader

And then instruct webpack to use the css-loader for every .css file and the ts-loader for all .ts files:

webpack.config.js

module.exports =  module:  rules: [  test: /\.css$/, use: 'css-loader' >,  test: /\.ts$/, use: 'ts-loader' >, ], >, >;

Using Loaders

There are two ways to use loaders in your application:

• Configuration (recommended): Specify them in your webpack.config.js file.
• Inline: Specify them explicitly in each import statement.

Note that loaders can be used from CLI under webpack v4, but the feature was deprecated in webpack v5.

Configuration

module.rules allows you to specify several loaders within your webpack configuration. This is a concise way to display loaders, and helps to maintain clean code. It also offers you a full overview of each respective loader.

Loaders are evaluated/executed from right to left (or from bottom to top). In the example below execution starts with sass-loader, continues with css-loader and finally ends with style-loader. See «Loader Features» for more information about loaders order.

module.exports =  module:  rules: [  test: /\.css$/, use: [  loader: 'style-loader' >,  loader: 'css-loader', options:  modules: true, >, >,  loader: 'sass-loader' >, ], >, ], >, >;

Inline

It’s possible to specify loaders in an import statement, or any equivalent «importing» method. Separate loaders from the resource with ! . Each part is resolved relative to the current directory.

import Styles from 'style-loader!css-loader?modules!./styles.css';

It’s possible to override any loaders, preLoaders and postLoaders from the configuration by prefixing the inline import statement:

Prefixing with ! will disable all configured normal loaders

import Styles from '!style-loader!css-loader?modules!./styles.css';

import Styles from '!!style-loader!css-loader?modules!./styles.css';

import Styles from '-!style-loader!css-loader?modules!./styles.css';

Options can be passed with a query parameter, e.g. ?key=value&foo=bar , or a JSON object, e.g. ? .

tip

Use module.rules whenever possible, as this will reduce boilerplate in your source code and allow you to debug or locate a loader faster if something goes south.

Loader Features

• Loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain.
• Loaders can be synchronous or asynchronous.
• Loaders run in Node.js and can do everything that’s possible there.
• Loaders can be configured with an options object (using query parameters to set options is still supported but has been deprecated).
• Normal modules can export a loader in addition to the normal main via package.json with the loader field.
• Plugins can give loaders more features.
• Loaders can emit additional arbitrary files.

Loaders provide a way to customize the output through their preprocessing functions. Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and more.

Resolving Loaders

Loaders follow the standard module resolution. In most cases it will be loaded from the module path (think npm install , node_modules ).

A loader module is expected to export a function and be written in Node.js compatible JavaScript. They are most commonly managed with npm, but you can also have custom loaders as files within your application. By convention, loaders are usually named xxx-loader (e.g. json-loader ). See «Writing a Loader» for more information.

Источник