The--loaders of Webpack learning

The loader is used to convert the module's source code. Loader can enable you to import preprocess files while or "Loading" the module. As a result, loader is similar to "task" in other build tools and provides a powerful way to handle front-end build steps. Loader can convert a file from a different language (such as TypeScript) to JavaScript, or convert an inline image to a data URL. Loader even allows you to directly in the JavaScript module import CSS file!

1.Example

You can use loader to download a CSS file or convert typescript to JS file, you need to download the following loaders:

Then instruct Webpack on each .css use css-loader , as well as on all .ts files used ts-loader :

2. Using LoadersThere are three ways to use loaders in your app

• Inline: The specified loader (inline:specify them explicitly in every statement) displayed in each import statement import ;

• Configuration (Recommended): Specify Loader (configuration (recommended): Specify them in your Webpack.config.js file) in the webpack.config.js.

• CLI: Specify them in shell commands (cli:specify them within a shell command).

3. Configuration

   module.rulesAllows to specify several loaders within your webpack configuration. This is a concise (concise, concise) to the display loaders, and helps to maintain clean code. It also offers all overview of each respective (separate, individual) loader:

You can import specify loader in a statement or in any manner equivalent to "import." Use ! to separate the loader in the resource. Each part of the partition is parsed relative to the current directory.

Tips

use module.rules whenever possible, as this would reduce boilerplate in your source code and allow you to debug or locate a lo Ader faster if something goes south.

4. CLI

You can also use loaders through the CLI:

This will be .jade used for files jade-loader , .css and for style-loader files css-loader .

The--loaders of Webpack learning