图片处理

使用loader

  • file-loader

  • url-loader

    file-loader

  • [ext]: 扩展名

  • [name]: 文件名
  • [hash]: 每次打包的hash
  • [contentHash]: 根据内容变动的hash ```javascript const path = require(‘path’) /**
    • [ext]: 扩展名
    • [name]: 文件名
    • [hash]: 文件内容
    • [contentHash]:
    • [hash:]
    • [path]: */ module.exports = { entry: ‘./src/index.js’, output: { filename: ‘main.js’, path: path.resolve(__dirname, ‘dist’) }, module: { rules: [ {
      1. test: /\.(png|svg|gif|jpe?g)$/,
      2. use: [
      3.   {
      4.     loader: 'file-loader',
      5.     options: {
      6.       name: 'img/[name].[hash:6].[ext]',
      7.       // outputPath: 'img'
      8.     }
      9.   }
      10. ]
      } ] } }
  1. <a name="yYXjI"></a>
  2. ##### 注意：
  3. 在css中引入的静态资源，file-loader 在webpack5后到处的文件如果是require导入的如果不去配置esModule: false ，则需.default 导出，这个问题会导致css-loader 加载资源的时候出现问题
  4. ```javascript
  5.   {
  6.         test: /\.(png|svg|gif|jpe?g)$/,
  7.         use: [
  8.           {
  9.             loader: 'file-loader',
  10.             options: {
  11.               esModule: false // 不转为 esModule
  12.             }
  13.           }
  14.         ]
  15.       }

所以需要再css-loader中设置esModule: false

  1. module.exports = {
  2.   entry: './src/index.js',
  3.   output: {
  4.     filename: 'main.js',
  5.     path: path.resolve(__dirname, 'dist')
  6.   },
  7.   module: {
  8.     rules: [
  9.       {
  10.         test: /\.css$/,
  11.         use: [
  12.           'style-loader',
  13.           {
  14.             loader: 'css-loader',
  15.             options: {
  16.               importLoaders: 1,
  17.               esModule: false // 就是这里的
  18.             }
  19.           },
  20.           'postcss-loader'
  21.         ]
  22.       },
  23.       {
  24.         test: /\.less$/,
  25.         use: [
  26.           'style-loader',
  27.           'css-loader',
  28.           'postcss-loader',
  29.           'less-loader'
  30.         ]
  31.       },
  32.       {
  33.         test: /\.(png|svg|gif|jpe?g)$/,
  34.         use: [
  35.           {
  36.             loader: 'file-loader',
  37.             options: {
  38.               name: 'img/[name].[hash:6].[ext]',
  39.             }
  40.           }
  41.         ]
  42.       }
  43.     ]
  44.   }
  45. }

url-loader

file-loader就是将文件复制过去，url-loader 包含了file-loader，配置了limit之后大于limit的才会用file-loader，小于的会被打包到js内去

  1. const path = require('path')
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'main.js',
  7.     path: path.resolve(__dirname, 'dist')
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/,
  13.         use: [
  14.           'style-loader',
  15.           {
  16.             loader: 'css-loader',
  17.             options: {
  18.               importLoaders: 1,
  19.               esModule: false
  20.             }
  21.           },
  22.           'postcss-loader'
  23.         ]
  24.       },
  25.       {
  26.         test: /\.less$/,
  27.         use: [
  28.           'style-loader',
  29.           'css-loader',
  30.           'postcss-loader',
  31.           'less-loader'
  32.         ]
  33.       },
  34.       {
  35.         test: /\.(png|svg|gif|jpe?g)$/,
  36.         use: [
  37.           {
  38.             loader: 'url-loader',
  39.             options: {
  40.               name: 'img/[name].[hash:6].[ext]',
  41.               limit: 25 * 1024
  42.             }
  43.           }
  44.         ]
  45.       }
  46.     ]
  47.   }
  48. }

asset模块

asset模块是webpack5提供的

asset/resource file-loader
asset/inline url-loader
asset url-loader : limit

asset 打包地址的话，分两个属性
全局
全局控制

  1.   output: {
  2.     filename: 'main.js',
  3.     path: path.resolve(__dirname, 'dist'),
  4.     assetModuleFilename: "img/[name].[hash:4][ext]"
  5.   },

局部

  1.      {
  2.         test: /\.(png|svg|gif|jpe?g)$/,
  3.         type: 'asset/resource',
  4.         generator: {
  5.           filename: "img/[name].[hash:4][ext]"
  6.         }
  7.       },

asset 如果想达到url-loader + limit的效果的话,需要配置parser

  1.       {
  2.         test: /\.(png|svg|gif|jpe?g)$/,
  3.         type: 'asset',
  4.         generator: {
  5.           filename: "img/[name].[hash:4][ext]"
  6.         },
  7.         parser: {
  8.           dataUrlCondition: {
  9.             maxSize: 30 * 1024
  10.           }
  11.         }
  12.       }

整体代码

  1. const path = require('path')
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'main.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.     // assetModuleFilename: "img/[name].[hash:4][ext]"
  9.   },
  10.   module: {
  11.     rules: [
  12.       {
  13.         test: /\.css$/,
  14.         use: [
  15.           'style-loader',
  16.           {
  17.             loader: 'css-loader',
  18.             options: {
  19.               importLoaders: 1,
  20.               esModule: false
  21.             }
  22.           },
  23.           'postcss-loader'
  24.         ]
  25.       },
  26.       {
  27.         test: /\.less$/,
  28.         use: [
  29.           'style-loader',
  30.           'css-loader',
  31.           'postcss-loader',
  32.           'less-loader'
  33.         ]
  34.       },
  35.       // {
  36.       //   test: /\.(png|svg|gif|jpe?g)$/,
  37.       //   type: 'asset/resource',
  38.       //   generator: {
  39.       //     filename: "img/[name].[hash:4][ext]"
  40.       //   }
  41.       // },
  42.       // {
  43.       //   test: /\.(png|svg|gif|jpe?g)$/,
  44.       //   type: 'asset/inline'
  45.       // }
  46.       {
  47.         test: /\.(png|svg|gif|jpe?g)$/,
  48.         type: 'asset',
  49.         generator: {
  50.           filename: "img/[name].[hash:4][ext]"
  51.         },
  52.         parser: {
  53.           dataUrlCondition: {
  54.             maxSize: 30 * 1024
  55.           }
  56.         }
  57.       }
  58.     ]
  59.   }
  60. }

字体处理

font 资源处理就使用asset/resource 直接拷贝

  2.      {
  3.         test: /\.(ttf|woff2?)$/,
  4.         type: 'asset/resource',
  5.         generator: {
  6.           filename: 'font/[name].[hash:3][ext]'
  7.         }
  8.       }

整体代码

  1. const path = require('path')
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'main.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.     // assetModuleFilename: "img/[name].[hash:4][ext]"
  9.   },
  10.   module: {
  11.     rules: [
  12.       {
  13.         test: /\.css$/,
  14.         use: [
  15.           'style-loader',
  16.           {
  17.             loader: 'css-loader',
  18.             options: {
  19.               importLoaders: 1,
  20.               esModule: false
  21.             }
  22.           },
  23.           'postcss-loader'
  24.         ]
  25.       },
  26.       {
  27.         test: /\.less$/,
  28.         use: [
  29.           'style-loader',
  30.           'css-loader',
  31.           'postcss-loader',
  32.           'less-loader'
  33.         ]
  34.       },
  35.       {
  36.         test: /\.(png|svg|gif|jpe?g)$/,
  37.         type: 'asset',
  38.         generator: {
  39.           filename: "img/[name].[hash:4][ext]"
  40.         },
  41.         parser: {
  42.           dataUrlCondition: {
  43.             maxSize: 30 * 1024
  44.           }
  45.         }
  46.       },
  47.       {
  48.         test: /\.(ttf|woff2?)$/,
  49.         type: 'asset/resource',
  50.         generator: {
  51.           filename: 'font/[name].[hash:3][ext]'
  52.         }
  53.       }
  54.     ]
  55.   }
  56. }