webpack assets versus static assets

One of the benefits of using webpack for asset serving is that it optimizes them for production, whether they are images, fonts, or preprocessed styles such as Less, Sass, or Stylus. webpack can transform Less, Sass, and Stylus into generic CSS, while a static folder is just a place where you can put all of your static assets that will never be touched by webpack. In Nuxt, if you don't want to use the webpack assets from the /assets/ directory for your project, you can use the /static/ directory instead.

For example, we can use the static image from the /static/ directory, as follows:

// pages/index.vue
<template>
  <img src="/sample-1.jpg"/>
</template>

Another good example is the favicon file in the Nuxt config file:

// nuxt.config.js
export default {
  head: {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

Note that if you use...