Loader usage analysis of webpack3

This time I will bring you the loader usage analysis of webpack3. What are the precautions for loader usage analysis in webpack3? The following is a practical case, let's take a look.

First show the official website of webpack. What can webpack do? The answer given by the official website is, in one sentence, it makes everything simple!

Various loaders emerge in endlessly, leaving us at a loss when building. Here, we summarize the full analysis of loaders.

concept

Loader, as the name suggests, loader, the English explanation is as follows:

Loaders are transformations that are applied on 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 inline images as data URLs. Loaders even allow you to do things like import css files directly from your JavaScript modules!

The Chinese translation is:

The loader is used to convert the source code of the module. A loader allows you to pre-process files

when importing or "loading" a module. Therefore, loader Similar to "tasks" in other build tools, and provides a powerful way to handle front-end build steps. The loader can load files from different languages ​​such as TypeScript) to JavaScript, or inline images to data URLs. loader even allows you to directly use JavaScript Import CSS files in the module! From this, we can see the powerful role of loader. Let’s analyze it:

The role of conversion. Everything used in development is converted into files in required formats such as html css js img necessary for web page loading.
The conversion object is the source code. The loader only converts the source code. As for other functions, the plugins take over what it cannot do.
To sum up in one sentence: loader, a loading machine, is like a soymilk machine. Put your ingredients and it will start working seriously!

Commonly used loaders

1、babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

Load ES2015 code and use Babel to transpile it to ES5

Installation:

npm install --save-dev babel-loader babel-core babel-preset-env webpack

Use:

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2、style-loader

Adds CSS to the DOM by injecting a

Add the module's exports to the DOM as styles

Installation:

npm install style-loader --save-dev

It is recommended to use it with css-loader

Use:

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3、css-loader

After parsing the CSS file, use import to load it and return the CSS code

Installation:

npm install css-loader --save-dev

Use:

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4、less-loader

Loading and translating LESS files

Installation:

npm install --save-dev less-loader less

Use:

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5、url-loader

Loads files as base64 encoded URL

Process image files, but if the file is smaller than the limit, you can return data URL

Installation:

npm install --save-dev url-loader

Use:

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6、file-loader

Instructs webpack to emit the

require

d object as file and to return its public URL Process font/svg etc., send files to output folder, and return (relative) URL

Installation:

npm install file-loader --save-dev

Use:

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

7、vue-loader

Loading and translating Vue components

Installation:

npm install --save-dev vue-loader vue vue-template-compiler

use:

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

The above is the detailed content of Loader usage analysis of webpack3. For more information, please follow other related articles on the PHP Chinese website!