loader 是什么？
- loader 就是一個打包的方案览妖。對于特定的非 js 模塊告訴 webpack 該如何打包祟身。
- webpack 根據(jù)正則表達式菩貌，來確定應(yīng)該查找哪些文件，并將其提供給指定的 loader欺缘。在這種情況下栋豫，以 .css 結(jié)尾的全部文件，都將被提供給 style-loader 和 css-loader谚殊。
有哪些常見的 loader丧鸯，它們是解決什么問題的 ？
文件加載類
- raw-loader：加載文件原始內(nèi)容（utf-8）
- file-loader：把文件輸出到一個文件夾中嫩絮，在代碼中通過相對 URL 去引用輸出的文件 (處理圖片和字體)
- url-loader：與 file-loader 類似丛肢，區(qū)別是用戶可以設(shè)置一個閾值 limit，大于閾值時返回其 publicPath剿干，小于閾值時返回文件 base64 形式編碼 (處理圖片和字體)
- image-loader：加載并且壓縮圖片文件
- json-loader 加載 JSON 文件（默認包含）
代碼轉(zhuǎn)換類
- babel-loader：把 ES6 轉(zhuǎn)換成 ES5
- ts-loader: 將 TypeScript 轉(zhuǎn)換成 JavaScript
- awesome-typescript-loader：將 TypeScript 轉(zhuǎn)換成 JavaScript蜂怎，性能優(yōu)于 ts-loader
- sass-loader：將SCSS/SASS代碼轉(zhuǎn)換成CSS
- css-loader：加載 CSS，支持模塊化置尔、壓縮杠步、文件導入等特性
- style-loader：把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS
- postcss-loader：擴展 CSS 語法，使用下一代 CSS幽歼，可以配合 autoprefixer 插件自動補齊 CSS3 前綴
- svg-inline-loader：將壓縮后的 SVG 內(nèi)容注入代碼中
- handlebars-loader: 將 Handlebars 模版編譯成函數(shù)并返回
檢查朵锣、測試、調(diào)試類
- source-map-loader：加載額外的 Source Map 文件试躏，以方便斷點調(diào)試
- svg-inline-loader：將壓縮后的 SVG 內(nèi)容注入代碼中
- handlebars-loader: 將 Handlebars 模版編譯成函數(shù)并返回
- eslint-loader：通過 ESLint 檢查 JavaScript 代碼
- tslint-loader：通過 TSLint檢查 TypeScript 代碼
- mocha-loader：加載 Mocha 測試用例的代碼
- coverjs-loader：計算測試的覆蓋率
- vue-loader：加載 Vue.js 單文件組件
- i18n-loader: 國際化
- cache-loader: 可以在一些性能開銷較大的 Loader 之前添加猪勇，目的是將結(jié)果緩存到磁盤里
基礎(chǔ)寫法：
module: {
rules: [{
test: /\.(jpg|png)$/, // 圖片
use: {
loader: 'url-loader',
options: {
// placeholder 占位符
name: '[name].[hash].[ext]', // 保留原名和擴展名兒
outputPath: 'img/', // 打包位置
limit: 2048 // 小于即轉(zhuǎn)碼 超出即直接復制
}
}
}, {
test: /\.(css|less)$/, // 樣式
use: ['style-loader', 'css-loader', 'less-loader']
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/, //字體
use: [
'file-loader'
]
}]
},
loader 執(zhí)行順序：從上到下，從右到左颠蕴。
url-loader file-loader less-loader
url-loader 由 limit 屬性決定當其小于給定字節(jié)大小時泣刹，會將圖片進行 base64 轉(zhuǎn)碼然后直接插入對應(yīng)引入位置；反之則和 file-loader 一樣直接復制到指定 path 中犀被。css-loader style-loader
css-loader 分析 css 文件之間的關(guān)系椅您，然后合并到一起。style-loader 則把其掛載到 head 部分寡键。兩者相互配合掀泳。
less-loader 解析 less 文件的語法成 css 語法。css-loader 后面可以跟 modules 屬性西轩，代表按模塊打包 css 文件
module: {
rules: [{
test: /.(js|jsx)$/,
use: [
'babel-loader'
],
exclude: /node_modules/
}, {
test: /.css$/,
// use: [ 'style-loader', 'css-loader?modules&localIdentName=[path]' ]
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]-[local]'
}
}
}]
}]
},
