webpack loaders 简介

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 读取文件,可以获得字符串内容

loader 的使用方法是在 webpack.config.js 配置,或者针对特定文件使用。

const path = require('path');
module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, './src')
                ],
                loaders: [
                    'babel-loader'
                ]
            }
        ]
    }
}

配置中几个字段的说明如下:

  • test: 用来判断文件是否使用本 loader 的正则,通常根据文件后缀区分
  • include: 包含的文件路径,数组形式的,wepback 只会在这些目录下找需要处理的文件
  • loaders: 数组的形式来表示符合条件的文件需要使用哪些 loader 进行处理
  • loader: 字符串的形式串联起来多个 loader

loader 可以串联使用,比如 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 中的参数可以通过在 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 中不能省略。

你可能感兴趣的:(webpack loaders 简介)