Loaders are transformations that are applied on the source code of a module. They allow you to preprocess files as you require()
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 inline images as data URLs. Loaders even allow you to do things like require()
CSS files right in your JavaScript!
For example, you can use loaders to tell webpack to load a CSS file or to convert TypeScript to JavaScript. Firstly, install the corresponding loaders:
npm install --save-dev css-loader npm install --save-dev ts-loader
Secondly, configure in your webpack.config.js
that for every .css
file the css-loader
should be used and analogously for .ts
files and the ts-loader
:
webpack.config.js
module.exports = { module: { rules: [ {test: /\.css$/, use: 'css-loader'}, {test: /\.ts$/, use: 'ts-loader'} ] } };
Note that according to the configuration options, the following specifications define the identical loader usage:
{test: /\.css$/, loader: 'css-loader'} // or equivalently {test: /\.css$/, use: 'css-loader'} // or equivalently {test: /\.css$/, use: { loader: 'css-loader', options: {} }}
There are three ways to use loaders in your application:
require
statementwebpack.config.js
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.
module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader'}, { loader: 'css-loader', options: { modules: true } } ] } ] }
require
It's possible to specify the loaders in the require
statement (or define
, require.ensure
, etc.). Separate loaders from the resource with !
. Each part is resolved relative to the current directory.
require('style-loader!css-loader?modules!./styles.css');
It's possible to overwrite any loaders in the configuration by prefixing the entire rule with !
.
Options can be passed with a query parameter, just like on the web (?key=value&foo=bar
). It's also possible to use a JSON object (?{"key":"value","foo":"bar"}
).
Use module.rules
whenever possible, as this will reduce boilerplate in your source code and allows you to debug or locate a loader faster if something goes south.
Optionally, you could also use loaders through the CLI:
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
This uses the jade-loader
for .jade
files, and the style-loader
and css-loader
for .css
files.
options
object.main
via package.json
with the loader
field.Loaders allow more power in the JavaScript ecosystem through preprocessing functions (loaders). Users now have more flexibility to include fine-grained logic such as compression, packaging, language translations and more.
Loaders follow the standard module resolution. In most cases it will be loaders from the module path (think npm install
, node_modules
).
How to write a loader? A loader module is expected to export a function and to be written in Node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.
By convention, loaders are usually named as XXX-loader
, where XXX
is the context name. For example, json-loader
.
The loader name convention and precedence search order is defined by resolveLoader.moduleTemplates
within the webpack configuration API.
© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/concepts/loaders/