webpack4.0从入门到入门（02-1常用loader）

loaders

webpack不能识别非js结尾的文件，loader是一种打包方案，定义不同的文件应该如何打包。

常用loader

file-loader
作用：用来处理图片字体等文件
原理：将文件移动到打包后的文件夹（dist）中，并返回文件名称。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
      },  
    ]
  },
}
rules的参数
属性说明注意事项
test匹配规则Rule.resource.test 的简写。如果你提供了一个 Rule.test 选项，就不能再提供 Rule.resource。
use使用的loader传递字符串（如：use: [ “style-loader” ]）是 loader 属性的简写方式（如：use: [ { loader: "style-loader "} ]）。
loader匹配规则Rule.use: [ { loader } ] 的简写。。
loaders匹配规则Rule.use的别名
options的参数
参数名参数描述使用示例
name文件名name："[name][hash:5][path].[ext]"
publicPath公共路径如果使用cdn时可以使用
outputPath输出目录其实可以在name参数中使用"/image/[name].[ext]"取代替
context文件上下文影响上面的path作用不大，默认webpack.config.js
plceholder
参数名参数描述默认值
[ext]资源扩展名file.extname
[name]资源的基本名称file.basename
[path]资源相对于 context的路径file.dirname
[hash]内容的哈希值 hashType : hash : digestType : lengthmd5
字体文件的处理
{
        test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       }

url-loader

url loader依赖file-loader 增加limit参数 用来限制图片的打包方式

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1024*5,
          name:'img/[name].[hash:7].[ext]'
        }
      },  
    ]
  },
}
版权声明：本文为qq_36514378原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。