Full parsing of webpack3 loader, webpack3loader

Full parsing of webpack3 loader, webpack3loader

First, what can we do with webpack? The answer on the official website is, in one sentence, making everything simple!

Various types of loaders emerge one after another, which makes us feel overwhelmed during the construction. Here, we will summarize the full parsing of the loader.

Concept

Loader, as its name implies, is interpreted 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!

Chinese Translation:

Loader is used to convert the source code of the module. Loader allows you to pre-process files when importing or Loading modules. Therefore, loader is similar to the "task" in other build tools and provides a powerful way to process the frontend build steps. Loader can convert files from different languages (such as TypeScript) to JavaScript, or convert Inline images to data URLs. Loader even allows you to directly import CSS files in the JavaScript module!

From this, we can see that the powerful function of loader is analyzed as follows:

1. The role of conversion. All files used for development are converted into html, css, js, img, and other required formats for webpage loading.
2. The conversion object is the source code. Loader only converts Source Code. For other functions, plugins will receive what it cannot do.

To sum up one sentence: loader, the loaded machine, in the image metaphor, is like a soya-bean milk machine. Put your raw materials on, and it starts to work seriously!

Common loader

1. babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

Load ES2015 + code and then translate it into ES5 Using Babel

Installation:

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

Usage:

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

2. style-loader

Adds CSS to the DOM by injecting a <style> tag

Add the export module as a style to the DOM

Installation:

npm install style-loader --save-dev 

We recommend that you use it with css-loader.

Usage:

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

3. css-loader

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

Installation:

npm install css-loader --save-dev 

Usage:

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

4. less-loader

Load and translate LESS files

Installation:

npm install --save-dev less-loader less 

Usage:

{ 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 the data URL

Installation:

npm install --save-dev url-loader 

Usage:

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

6. file-loader

Instructs webpack to emit the required object as file and to return its public URL

Process font/svg, send the file to the output folder, and return the (relative) URL

Installation:

npm install file-loader --save-dev 

Usage:

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

7. vue-loader

Load and translate Vue Components

Installation:

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

Usage:

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

So far, please go to the official website to query and solve the parameters used in loader. Thank you for checking them! The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.