loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
在深入学习对loader的编写之前，我们先熟悉下loader的常见配置规则。常见的有两种配置规则：
规则1：
loader配置中options的值可以在loader执行过程中获取到，进行相应处理，也可以直接在loader路径中添加query参数如下配置：
rules: [ { test: /\.text$/, loader: ‘text-loader?name=1‘//如果配置了options选项时，在路径中添加的query参数就无法获取到了 } ]
你还可以使用 resolveLoader.modules 配置，webpack 将会从这些目录中搜索这些 loaders。例如，如果你的项目中有一个 /loaders 本地目录，目录中有一个loader文件名为text-loader.js，那么可以这样配置：
resolveLoader: { modules: [ ‘node_modules‘, path.resolve(__dirname, ‘loaders‘) ] }, module: { rules: [ { test: /\.text$/, loader: ‘text-loader‘//如果node_modules目录中不存在，那么会取loaders目录中查找 } ] }
如果你想对某一类型的文件匹配多个loader，可以按照下列规则配置，多个loader模块用!分割，并且实际loader执行顺序是从右往左
{ test: /\.scss$/, loader:‘style-loader!css-loader!sass-loader‘ }
规则2:
如果想匹配多个loader，还可以使用use配置数组，实际loader执行顺序是从下往上
{ test: /\.scss$/, use:[ { loader:‘style-loader‘, options:{} }, { loader:‘css-loader‘ }, { loader:‘sass-loader‘ } ] }
如果对于引入的loader不做格外的配置，那么可以在use数组中添加loader名即可：
{ test: /\.scss$/, use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘] }
在熟悉了对loader的基本配置规则之后，那么我们就开始学习如何编写自己的loader吧
