Webpack:Loader学习作用 原理

作用：帮助 webpack 将不同类型的文件转换为 webpack (只能识别js/jsx)可识别的模块。

分类:   pre:前置 loader   normal:普通 loader  inline:内联 loader   post: 后置 loader

执行顺序：4 类 loader 的执行优级为：pre > normal > inline > post 。

        but相同优先级的 loader 执行顺序为：从右到左，从下到上。

如何使用：

配置方式：

        在 webpack.config.js 文件中指定 loader。（pre、normal、post loader）

       内联方式：在每个 import 语句中显式指定 loader。（inline loader——不同）

下面的两个例子，引入样式代码，指定了两个loader ?传参 ！并列两个loader

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

!的作用多个：

通过 ! 将资源中的 loader 分开

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

! 跳过 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';