2021-js++全修班-->webpack工程化-loader篇

file-loader 与 url-loader的区别？

• 1. 图片很大--》base64字符串很大--》bundle.js体积会很大---》index.html 加载 bundle.js 时间会很长
• 2. 图片很大--》file-loader ---》单独生存xxx.jpg ---》index.html引入xxx.jpg,---》 bundle.js 体积就会很小---》页面加载快
• 3. 图片很小--》file-loader--》单独生存xxx.jpg---》多发一次请求
• 4. 图片很小---》url-loader---》解析成base64字符串--》设置img src ---》不需要发送额外的请求图片的HTTP请求
• 5. 使用limit来自动配置判断走那个loader

对应的配置

// 模块
module: {
  // 配置规则
  rules: [
    {
      test: /.(png|jpe?g|gif)$/i,
        use: {
          // 这里是返回一个对象的模式，返回地址
          // loader: 'file-loader',

          // 这里的url-loader 是返回base64
          loader: 'url-loader',
          options: {
            // 我生成的图片名称 == 初始化的图片名称
            name: '[name].[ext]',
            //  打包生成的文件放在我想要的文件夹里面
            outputPath: 'img/',

            //  设置图片大小，并且判断图片大小，如果是小图片那就是使用url-loader打包base64，如果是大图片那就使用file-loader
            // 假设这里是 设置20k，20480/1024s = 20k
            limit: 20480,
          }
        }
    }
  ]
},

效果

file-loader会自动生成xxx.png文件，通过地址，引入到img src属性上

配置limit:这个参数，我们就可以控制，低于这个我们走url-loader，高于这个我们走file-loader这个

url-loader

file-loader

整个文件的项目配置

const path = require('path')

module.exports = {
  //设置mode ： 意思就是说实开发环境，还是生存环境
  mode: 'development',
  // 入口的文件名称
  entry: './src/index.js',

  // 模块
  module: {
    // 配置规则
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: {
          // 这里是返回一个对象的模式，返回地址
          // loader: 'file-loader',

          // 这里的url-loader 是返回base64
          loader: 'url-loader',
          options: {
            // 我生成的图片名称 == 初始化的图片名称
            name: '[name].[ext]',
            //  打包生成的文件放在我想要的文件夹里面
            outputPath: 'img/',

            //  设置图片大小，并且判断图片大小，如果是小图片那就是使用url-loader打包base64，如果是大图片那就使用file-loader
            // 假设这里是 设置20k，20480/1024s = 20k
            limit: 20480,
          }
        }
      }
    ]
  },

  // 打包出口的文件
  output: {
    // 文件的名称
    filename: 'bundle.js',
    // 打包到那里的文件名称
    // __dirname是，根目录的，放到根目录下的名称叫做dist的文件下的。上面filename的名称
    path: path.resolve(__dirname, 'dist')
  }
}

/*

  如你的文件不是最原始的，webpack.config.js，比如说是：webpack.dev.config.js
  这样子用npx webpack 会报错的
  我们就要使用:  npx webpack --config webpack.dev.config.js



  loader:
    file-loader 与  url-loader的区别？

     1.图片很大--》base64字符串很大--》bundle.js体积会很大---》index.html 加载 bundle.js 时间会很长

     2.图片很大--》file-loader ---》单独生存xxx.jpg ---》index.html引入xxx.jpg,---》 bundle.js 体积就会很小---》页面加载快

     3.图片很小--》file-loader--》单独生存xxx.jpg---》多发一次请求

     4.图片很小---》url-loader---》解析成base64字符串--》设置img src ---》不需要发送额外的请求图片的HTTP请求

* */