欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack3之loader全解析

 更新時間:2017年10月26日 09:56:36   作者:isNaN  
這篇文章主要介紹了webpack3之loader全解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

首先亮出webpack官方網(wǎng)站,webpack能干什么?官網(wǎng)給出的答案就是,一句話,讓一切變得簡單!

各式各樣的loader層出不窮,讓我們在構建時不知所措,于此,總結下loader的全解析。

概念

loader,顧名思義,加載器,英文的解釋如下:

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “l(fā)oad” 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!

中文翻譯過來就是:

loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或“加載”模塊時預處理文件。因此,loader 類似于其他構建工具中“任務(task)”,并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言(如 TypeScript)轉換為 JavaScript,或將內聯(lián)圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件!

從中,可以看出loader的強大作用,分析下:

  1. 轉換的作用。開發(fā)所用到的都轉換成網(wǎng)頁加載所必備的html+css+js+img等要求格式的文件。
  2. 轉換對象是源代碼。loader只對源代碼轉換,至于其他的功能,plugins就來接收它做不到的地方。

總結一句話:loader, 加載的機器,形象的比喻下,就像一個豆?jié){機,放上你的原料,它就開始認真的工作了!

常用的loader

1、babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

加載 ES2015+ 代碼,然后使用 Babel 轉譯為 ES5

安裝:

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

使用:

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

2、style-loader

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

將模塊的導出作為樣式添加到 DOM 中

安裝:

npm install style-loader --save-dev 

建議要與css-loader一起使用

使用:

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

3、css-loader

解析 CSS 文件后,使用 import 加載,并且返回 CSS 代碼

安裝:

npm install css-loader --save-dev 

使用:

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

4、less-loader

加載和轉譯 LESS 文件

安裝:

npm install --save-dev less-loader less 

使用:

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

5、url-loader

Loads files as base64 encoded URL

處理圖片類文件,但如果文件小于限制,可以返回 data URL

安裝:

npm install --save-dev url-loader 

使用:

{
 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

處理font/svg等,將文件發(fā)送到輸出文件夾,并返回(相對)URL

安裝:

npm install file-loader --save-dev 

使用:

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

7、vue-loader

加載和轉譯 Vue 組件

安裝:

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

使用:

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

至此,有關loader中所用的參數(shù)請移步官網(wǎng)查詢解決,謝謝查閱!以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論