关于webpack:webpack原理分析

loader原理
loader 概念
帮忙 webpack 将不同类型的文件转换为 webpack 可辨认的模块。
loader 执行程序
理解执行程序之前，须要先理解loader的分类

pre： 前置 loader
normal： 一般 loader
inline： 内联 loader
post： 后置 loader

执行程序

4 类 loader 的执行优级为：pre > normal > inline > post 。
雷同优先级的 loader 执行程序为：从右到左，从下到上。

// 此时loader执行程序：loader3 - loader2 - loader1module: {  rules: [    {      test: /\.js$/,      loader: "loader1",    },    {      test: /\.js$/,      loader: "loader2",    },    {      test: /\.js$/,      loader: "loader3",    },  ],}

复制代码

// 此时loader执行程序：loader1 - loader2 - loader3module: {  rules: [    {      enforce: "pre",      test: /.js$/,      loader: "loader1",    },    {      // 没有enforce就是normal      test: /.js$/,      loader: "loader2",    },    {      enforce: "post",      test: /.js$/,      loader: "loader3",    },  ],}

复制代码
应用 loader 的形式

配置形式：在 webpack.config.js 文件中指定 loader。（pre、normal、post loader）
内联形式：在每个 import 语句中显式指定 loader。（inline loader）

inline loader
用法：import Styles from 'style-loader!css-loader?modules!./styles.css';
含意：

应用 css-loader 和 style-loader 解决 styles.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';
编写loader
loader其实就是一个函数，接管上面三个参数

content 源文件的内容
map SourceMap 数据
meta 数据，能够是任何内容

最初返回解决后的内容。