Webpack Loaders总览

环境: webpack4.44.1

终于趁着换档期,沉下心来重新研究下Webpack 5大核心模块,依然是4.x版本.

先研究Webpack中的各种常用Loader.

Webpack中的Loader可以帮助处理除了js以外的其他文件,如css/图片/字体/json等等.

Webpack中把所有东西都视为模块,所以加载所有内容的时候都会以各种Loader通过相应方式打包成模块,这些模块可以被import和require.

Loader的使用方法

在wepbakc中5大核心之一的 module内使用,如下:

module.exports = {
    ...
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: 'html-loader'
         },
        {
          test: /\.css$/, // 匹配css扩展名的文件
          use: ['style-loader', 'css-loader']
         } 
      ]
    }
    ...
}

单Loader和多Loader配置,以及options配置的写法

• 单个loader使用loader即可,多Loader的执行顺序

从数组末尾往前执行: 从右到左,从下到上

{ // 单Loader不带options配置写法
  test: /\.html$/
  loader: 'html-loader'
},
{// 单Loader 配置 options写法
  test: /\.(jpg|jpeg|png|svg|gif)$/,
  loader: url-loader,
  options: {
    limit: 8*1024,
    name: '[hash:10].[ext]',
    outputPath: './build/images'
  }
}

• 多Loader使用use配置

{ // 多Loader不带options配置写法
  test: /\.(sass|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
},
{ // 多Loader配置options写法
  test: /\.css$/,
  use: [
    'style-loader', 
    {
      loader: 'css-loader',
      options: {
        options: {
            modules: true 
          }
      }
    }
  ]
} 

内联方式使用多Loader

{ // 多Loader不带options配置写法
  test: /\.(sass|scss)$/,
  loader: 'style-loader!css-loader!sass-loader'
},
// 在import语法中显示指定loader
import Styles from 'style-loader!css-loader!./styles.css';
import Styles from 'style-loader!css-loader?modules=false&url=false!./styles.css'; // 查询参数
import Styles from 'style-loader!css-loader?{modules: true,url: false}!./styles.css'; // ?后传入json对象

常用的Loader

• bable-loader: 提供将先进的api向低版本浏览器兼容的能力
• css-loader: 提供在js中通过 import 'xxx.css' require('xxx.css') 引入的css和在css中通过 @import 'xxx.css'/@import url('xxx.css')引入的css 转换成模块的能力,然后将由style-loader或postcss-loader来进一步处理
• style-loader: 将css-loader转换成模块后的css输出到html的style标签内,可能会产生多个style标签.
• less-loader: less预处理语言转义
• sass-loader:sass预处理语言转义
• stylus-loader: stylus预处理语言转义
• file-loader: 将文件发送到输出文件夹，并返回（相对）URL
• url-loader: 由file-loader扩展而来,可以通过设置limit属性将小于限制的图片转为base64格式
• html-loader: 导出 HTML 为字符串，需要引用静态资源
• postcss-loader:
• json-loader: 加载 JSON 文件（默认包含）
• json5-loader: 加载和转译 JSON 5 文件
• raw-loader: 加载文件原始内容（utf-8）