assets.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. /** @type {import('@vue/cli-service').ServicePlugin} */
  2. module.exports = (api, options) => {
  3. const getAssetPath = require('../util/getAssetPath')
  4. const genAssetSubPath = dir => {
  5. return getAssetPath(
  6. options,
  7. `${dir}/[name]${options.filenameHashing ? '.[hash:8]' : ''}[ext]`
  8. )
  9. }
  10. api.chainWebpack(webpackConfig => {
  11. webpackConfig.module
  12. .rule('svg')
  13. .test(/\.(svg)(\?.*)?$/)
  14. // do not base64-inline SVGs.
  15. // https://github.com/facebookincubator/create-react-app/pull/1180
  16. .set('type', 'asset/resource')
  17. .set('generator', {
  18. filename: genAssetSubPath('img')
  19. })
  20. webpackConfig.module
  21. .rule('images')
  22. .test(/\.(png|jpe?g|gif|webp|avif)(\?.*)?$/)
  23. .set('type', 'asset')
  24. .set('generator', {
  25. filename: genAssetSubPath('img')
  26. })
  27. webpackConfig.module
  28. .rule('media')
  29. .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
  30. .set('type', 'asset')
  31. .set('generator', {
  32. filename: genAssetSubPath('media')
  33. })
  34. webpackConfig.module
  35. .rule('fonts')
  36. .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
  37. .set('type', 'asset')
  38. .set('generator', {
  39. filename: genAssetSubPath('fonts')
  40. })
  41. })
  42. }