loader 原理

loader – 帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

loader执行顺序

  1. 分类

    • pre：前置

    • normal：普通，默认的

    • inline：内联

    • post：后置

  2. 执行顺序

    • pre > normal > inline > post
    • 相同优先级执行顺序，从右到左，从下到上

  3. 使用loader的方式

    • 配置方式
    • 内联方式：在每个import中显示指定loader

  4. inline loader

    import Styles from 'style-loader!css-loader?modules!./styles.css';

    含义：

    • 使用 css-loader 和style-loader 处理css文件
    • ！用来分隔loader

    inline-loader可以通过添加不同前缀跳过其他类型loader

    • ！跳过normal loader

      import Styles from '!style-loader!css-loader?modules!./styles.css';

    • -！跳过pre 和 normal loader

      import Styles from '-!style-loader!css-loader?modules!./styles.css';

    • ！！跳过pre 、 normal 和 post loader

      import Styles from '!!style-loader!css-loader?modules!./styles.css';