Repository: nuxt/nuxt.js
Pull request #7961 (2020-08-24 19:52:47)

chore: add avif format as image
AVIF, a new image compression format, will be supported in the next Chrome version and is supported behind a flag in FireFox ([source](https://caniuse.com/#feat=avif)). We should add it to our default webpack config so users can utilize the format!

## Types of changes

- [ ] Bug fix (a non-breaking change which fixes an issue)
- [x] New feature (a non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly. (PR: #)
- [ ] I have added tests to cover my changes (if not applicable, please state why)
- [ ] All new and existing tests are passing.



codecov-commenter: # [Codecov](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=h1) Report
> Merging [#7961](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=desc) into [dev](https://codecov.io/gh/nuxt/nuxt.js/commit/5e9d759d7bee6a3d32e16ef05eef988e882c600a?el=desc) will **not change** coverage.
> The diff coverage is `0.00%`.

[![Impacted file tree graph](https://codecov.io/gh/nuxt/nuxt.js/pull/7961/graphs/tree.svg?width=650&height=150&src=pr&token=nGD1PtMB3M)](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##              dev    #7961   +/-   ##
=======================================
  Coverage   68.92%   68.92%           
=======================================
  Files          91       91           
  Lines        3846     3846           
  Branches     1041     1041           
=======================================
  Hits         2651     2651           
  Misses        971      971           
  Partials      224      224           
```

| Flag | Coverage Δ | |
|---|---|---|
| #unittests | `68.92% <0.00%> (ø)` | |

Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags#carryforward-flags-in-the-pull-request-comment) to find out more.

| [Impacted Files](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/vue-renderer/src/renderers/spa.js](https://codecov.io/gh/nuxt/nuxt.js/pull/7961/diff?src=pr&el=tree#diff-cGFja2FnZXMvdnVlLXJlbmRlcmVyL3NyYy9yZW5kZXJlcnMvc3BhLmpz) | `0.00% <0.00%> (ø)` | |
| [packages/webpack/src/config/base.js](https://codecov.io/gh/nuxt/nuxt.js/pull/7961/diff?src=pr&el=tree#diff-cGFja2FnZXMvd2VicGFjay9zcmMvY29uZmlnL2Jhc2UuanM=) | `64.63% <ø> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=footer). Last update [5e9d759...6c0a3e5](https://codecov.io/gh/nuxt/nuxt.js/pull/7961?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/packages/vue-renderer/src/renderers/spa.js b/packages/vue-renderer/src/renderers/spa.js
index 8ec5446a4..4101dd5df 100644
--- a/packages/vue-renderer/src/renderers/spa.js
+++ b/packages/vue-renderer/src/renderers/spa.js
@@ -200,7 +200,7 @@ export default class SPARenderer extends BaseRenderer {
       return 'script'
     } else if (ext === 'css') {
       return 'style'
-    } else if (/jpe?g|png|svg|gif|webp|ico/.test(ext)) {
+    } else if (/jpe?g|png|svg|gif|webp|ico|avif/.test(ext)) {
       return 'image'
     } else if (/woff2?|ttf|otf|eot/.test(ext)) {
       return 'font'
diff --git a/packages/webpack/src/config/base.js b/packages/webpack/src/config/base.js
index 39ce9cb9d..4721578f5 100644
--- a/packages/webpack/src/config/base.js
+++ b/packages/webpack/src/config/base.js
@@ -362,7 +362,7 @@ export default class WebpackBaseConfig {
         })
       },
       {
-        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        test: /\.(png|jpe?g|gif|svg|webp|avif)$/i,
         use: [{
           loader: 'url-loader',
           options: Object.assign(


Test patch:
diff --git a/packages/cli/test/unit/__snapshots__/webpack.test.js.snap b/packages/cli/test/unit/__snapshots__/webpack.test.js.snap
index 719860577..a138f9cc8 100644
--- a/packages/cli/test/unit/__snapshots__/webpack.test.js.snap
+++ b/packages/cli/test/unit/__snapshots__/webpack.test.js.snap
@@ -565,7 +565,7 @@ exports[`webpack nuxt webpack module.rules 1`] = `
     \\"test\\": /\\\\.styl(us)?$/i,
   },
   Object {
-    \\"test\\": /\\\\.(png|jpe?g|gif|svg|webp)$/i,
+    \\"test\\": /\\\\.(png|jpe?g|gif|svg|webp|avif)$/i,
     \\"use\\": Array [
       Object {
         \\"loader\\": \\"url-loader\\",