Home > Article > Web Front-end > Loader analysis of webpack3
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. This article mainly introduces the full analysis of the loader of webpack3. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.
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:
loader is used to convert the source code of the module. Loaders allow you to preprocess files when importing or "loading" modules. Therefore, loaders are similar to "tasks" in other build tools and provide a powerful way to handle front-end build steps. Loaders can convert files from different languages (such as TypeScript) to JavaScript, or inline images to data URLs. The loader even allows you to import CSS files directly in JavaScript modules!
From this, we can see the powerful role of loader. Let’s analyze:
The role of conversion. Everything used in development is converted into files in required formats such as html+css+js+img, which are 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 summarize: 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 then use Babel to translate 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 c9ccee2e6ea535a969eb3f532ad9fe89 tag
Add the export of the module to the DOM as a style
Installation:
npm install style-loader --save-dev
It is recommended to use it together 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
Load and translate LESS File
Installation:
##
npm install --save-dev less-loader lessUse:
{ test: /\.less$/, exclude: /node_modules/, use: ExtractTextPlugin.extract(['css-loader', 'less-loader']) }
5, url-loader
npm install --save-dev url-loaderUse:
{ test: /\.(jpg|jpeg|png|gif)$/, loader: 'url-loader', options: { limit: 8192 } }
6. file-loader
npm install file-loader --save-devUse:
{ test: /\.(woff|woff2|svg|eot|ttf)$/, use: 'file-loader' }
7. vue-loader
npm install --save-dev vue-loader vue vue-template-compilerUse:
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { less: ExtractTextPlugin.extract({ use: ['css-loader', 'less-loader'], fallback: 'vue-style-loader' }) } } }Related recommendations:
Detailed explanation of classloader based on Java class loading method
How to understand loader and plugin in webpack
yii2 Example analysis of how to use webuploader to upload images
The above is the detailed content of Loader analysis of webpack3. For more information, please follow other related articles on the PHP Chinese website!