css-loader

style-loader

file-loader

假想，现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中


加载图片：


现在，当你 import MyImage from './my-image.png'，该图像将被处理并添加到 output 目录，并且 MyImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，你的 CSS 中的 url('./my-image.png') 会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 './my-image.png' 路径，替换为输出目录中图像的最终路径。html-loader 以相同的方式处理 <img src="./my-image.png" />。

image.png

  1. import React, { Component } from "react";
  2. import "./index.css";
  3. import myImage from '../code.jpeg';
  5. console.log('---myImage', myImage);
  7. export default class App extends Component {
  8.   render() {
  9.     return (
  10.       <div className="app-container">
  11.         hello webpack
  12.         <img src={myImage}></img>
  13.       </div>
  14.     );
  15.   }
  16. }

url-loader

url-loader可以将指定大小及以下的图片文件转成base64写入js，避免额外请求图片资源，如果超过指定大小再使用file-loader打包图片文件。

  1.       {
  2.         // 处理图片，可将 css 中引用的图片分离到指定位置
  3.         test: /\.(png|gif|svg|jp(e)?g)$/,
  4.         use: [
  5.           {
  6.             loader: "url-loader",
  7.             options: {
  8.               name: "img/[name].[hash:5].[ext]",
  9.               limit: 1024, // size <= 1kib
  10.               // outputPath: "img",
  11.               // publicPath: "../", // 其作用是在 打包后的html中的图片地址 前加上路径
  12.             }
  13.           }
  14.         ]
  15.       },

加载字体：

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体。

  1.     {
  2.        test: /\.(woff|woff2|eot|ttf|otf)$/,
  3.        use: [
  4.            'file-loader'
  5.        ]
  6.      }

通过配置好 loader 并将字体文件放在合适的地方，你可以通过一个 @font-face 声明引入。本地的 url(...) 指令会被 webpack 获取处理，就像它处理图片资源一样：

  1.   @font-face {
  2.     font-family: 'MyFont';
  3.     src:  url('./my-font.woff2') format('woff2'),
  4.           url('./my-font.woff') format('woff');
  5.     font-weight: 600;
  6.     font-style: normal;
  7.   }
  9.   .hello {
  10.     color: red;
  11.     font-family: 'MyFont';
  12.     background: url('./icon.png');
  13.   }

csv-loader & xml-loader

      {
        test: /\.(csv|tsv)$/,
        use: ["csv-loader"]
      },
      {
        test: /\.xml$/,
        use: ["xml-loader"]
      },

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

import data from '../view/data.xml';

console.log('---data-xml--', data);

在使用 d3 等工具来实现某些数据可视化时，预加载数据会非常有用。我们可以不用再发送 ajax 请求，然后于运行时解析数据，而是在构建过程中将其提前载入并打包到模块中，以便浏览器加载模块后，可以立即从模块中解析数据。
_

html-loader

需要补充说明的是file-loader、url-loader不能处理html中的图片（如img的src属性引用的图片），如果要处理html中的图片，需要另外使用其它loader。即 html-loader

      {
        test: /\.html$/,
        use:[
          "html-loader", //处理 html中引用的图片，将其分离出来到指定位置
        ]
      }