[Translation] webpack official website documentation: Concepts -- 4. Loaders

Original translation, please indicate the source when reprinting. 

Original address: https://webpack.js.org/concepts/loaders/

 

Loaders are applied to the source code in your application to implement transformations. They are functions (running in Node.js ) that take source files as arguments and generate new files.

example

For example, use loaders to tell webpack to load CSS files, or convert TypeScript to Javascript .

First, install the corresponding loader:

 

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

 

Then, configure in webpack.config.js , use css-loader for each .css file , and similarly use ts-loader for .ts files .

 

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

 

 

Note that the same loader usage is defined in the following way according to the definition of the configuration options:

 

{test:/\.css$/, loader:'css-loader'}
// or equivalently
{test:/\.css$/, use:'css-loader'}
// or equivalently
{test:/\.css$/, use:{
  loader:'css-loader',
  options:{}
}}

   

configure

There are three ways to use loaders in your application:

• by configuration
• detailed in the require statement
• via CLI

via webpack.config.js

module.rules allows you to specify multiple loaders in the webpack configuration. This is a neat way to display loaders and helps you maintain clean code. It also provides an overall overview of each loader.

 

module:{
    rules:[
      {
        test:/\.css$/,
        use:[
          { loader: 'style-loader'},
          {
            loader: 'css-loader',
            options:{
              modules:true
            }
          }
        ]
      }
    ]
  }

 

 

by require

Loaders can be specified via a require statement (or define , require.ensuse , etc.). Separate loaders with a ! (exclamation mark), each part is resolved relative to the current directory.

 

require('style-loader!css-loader?modules!./styles.css');

 

Prefix the rule as a whole with ! (exclamation mark) to override any loader defined in the configuration.

Options can be passed through query parameters, just like on the Internet ( ?key=value&foo=bar). You can also use a json object ( ?{"key":"value","foo":"bar"} ).

 

via CLI

As an alternative, you can use the loader via the CLI .

 

 

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

 Use jade-loader for .jade files, style-loader and css-loader for .css files .

 

Loader Features

• Loaders can be chained, they are applied to the corresponding source code pipeline. Compile a loader chain in sequential order. The first loader in the loader chain returns a value to the next loader. Webpack expects the last loader to return JavaScript .
• Loaders can be synchronous or asynchronous.
• The loader runs in Node.js. So any loader that can be implemented in Node.js can be implemented.
• The loader accepts query parameters, which can be used to pass configuration content to the loader.
• Loaders can also be configured using the options object.
• Standard modules can export a loader other than the standard main via the loader field of package.json.
• Plugins can provide more features to the loader.
• The loader can generate additional arbitrary files.

Loaders can contribute more to the JavaScript ecosystem through preprocessing functions (loaders) . Users can now add subdivision processing such as compression, large package, translation, etc. more flexibly.

 

parse loader

The loader follows standard module resolution. Most of the time you're talking about getting loaders from the module path (think npm install, node_modules ).

How to write a loader? A loader module outputs a function and is done under Node.js , compatible with JavaScript . Typically, npm is used to manage loaders, but it is also possible to implement loaders as files in your application.

By convention, loaders are usually named xxx-loader , where xxx is the context name. For example, json-loader .

Loader naming conventions and lookup priorities are defined in the webpack configuration API resolveLoader.moduleTemplates .

 

-- End --