webpack3.0之loader配置及编写

Posted 杜培东

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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执行顺序是从右往左

{
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配置及编写(二)

以上是关于webpack3.0之loader配置及编写的主要内容,如果未能解决你的问题,请参考以下文章

webpack4.0 + react

webpack实战之手写一个loader和plugin

webpack配置之自定义loader

webpack3.0+总结

webpack-dev-server配置指南webpack3.0

四大维度解锁Webpack3.0工具全技能