webpack3.0之loader配置及编写(一)

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执行顺序是从右往左，多个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吧

webpack3.0加载器loader配置及编写(二)