webpack 通過 loaders 解析 require 語句引入的文件。常用的 loader 有：
- babel-loader js 文件編譯
- style-loader style 標簽加載樣式文件
- css-loader 處理 css 文件
- postcss-loader 處理樣式
- json-loader 處理 json 文件，2.x 版本不再需要
- url-loader 處理圖片字體等，合適的文件會被編譯成 base64 URL，否則則使用 file-loader
- file-loader 處理圖片字體等，拿到文件的相對路徑
- raw-loader 讀取文件，可以獲得字符串內(nèi)容
loader 的使用方法是在 webpack.config.js 配置，或者針對特定文件使用。
const path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, './src')
],
loaders: [
'babel-loader'
]
}
]
}
}
配置中幾個字段的說明如下：
-
test: 用來判斷文件是否使用本 loader 的正則，通常根據(jù)文件后綴區(qū)分 -
include: 包含的文件路徑，數(shù)組形式的，wepback 只會在這些目錄下找需要處理的文件 -
loaders: 數(shù)組的形式來表示符合條件的文件需要使用哪些 loader 進行處理 -
loader: 字符串的形式串聯(lián)起來多個 loader
loader 可以串聯(lián)使用，比如 less 文件需要先使用 less-loader，再使用 css-loader，最后使用 style-loader。
在配置中 loaders 的書寫順序是：
const path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.less$/,
include: [
path.resolve(__dirname, './src')
],
loaders: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
loader 中的參數(shù)可以通過在 loader 名稱后追加，比如在 css-loader 中開啟 css module 的寫法是 css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!。
針對特定文件使用 loader 需要修改代碼中的 require 語句。比如對特定的 css 文件不使用 css module。
import '!!style-loader!css-loader!../css/index.css';
require('!!style-loader!css-loader!../css/index.css');
在 require 前添加 !! 用來禁用所有在 config 中配置的 loader。
在 1.x 的 wepback 中可以省略 loader 名稱中后面的 -loader，但是 2.x 中不能省略。
