feat: new filenames structure (#3789)

* feat: new filenames structure

* refactor: codes format

* refactor: remove [path] in output filename

* refactor: use chunkhash for js files

* refactor: remove normalizeFileName

lib/builder/webpack/base.js

@@ -1,4 +1,5 @@
 import path from 'path'
+import consola from 'consola'
 
 import TimeFixPlugin from 'time-fix-plugin'
 import _ from 'lodash'
@@ -22,6 +23,14 @@ export default class WebpackBaseConfig {
     this.spinner = builder.spinner
   }
 
+  get nuxtEnv() {
+    return {
+      isDev: this.options.dev,
+      isServer: this.isServer,
+      isClient: !this.isServer
+    }
+  }
+
   getBabelOptions() {
     const options = _.clone(this.options.build.babel)
 
@@ -43,24 +52,16 @@ export default class WebpackBaseConfig {
     return options
   }
 
-  getFileName(name) {
+  getFileName(key) {
-    const fileName = this.options.build.filenames[name]
+    let fileName = this.options.build.filenames[key]
-
     if (typeof fileName === 'function') {
-      return name => this.normalizeFileName(fileName(name))
+      fileName = fileName(this.nuxtEnv)
     }
-    return this.normalizeFileName(fileName)
-  }
-
-  normalizeFileName(fileName) {
-    // Don't use hashes when watching
-    // https://github.com/webpack/webpack/issues/1914#issuecomment-174171709
     if (this.options.dev) {
-      fileName = fileName.replace(/\[(chunkhash|contenthash|hash)(?::(\d+))?\]\./g, '')
+      const hash = /\[(chunkhash|contenthash|hash)(?::(\d+))?\]/.exec(fileName)
-    }
+      if (hash) {
-    // Don't use [name] for production assets
+        consola.warn(`Notice: Please do not use ${hash[1]} in dev mode to prevent memory leak`)
-    if (!this.options.dev && this.options.build.optimization.splitChunks.name !== true) {
+      }
-      fileName = fileName.replace(/\[name\]\./g, '')
     }
     return fileName
   }
@@ -275,11 +276,7 @@ export default class WebpackBaseConfig {
 
   customize(config) {
     if (typeof this.options.build.extend === 'function') {
-      const extendedConfig = this.options.build.extend.call(this.builder, config, {
+      const extendedConfig = this.options.build.extend.call(this.builder, config, this.nuxtEnv)
-        isDev: this.options.dev,
-        isServer: this.isServer,
-        isClient: !this.isServer
-      })
       // Only overwrite config when something is returned for backwards compatibility
       if (extendedConfig !== undefined) {
         return extendedConfig

lib/common/nuxt.config.js

@@ -51,12 +51,13 @@ export default {
     cache: false,
     publicPath: '/_nuxt/',
     filenames: {
-      app: '[name].[contenthash].js',
+      // { isDev, isClient, isServer }
-      chunk: '[name].[contenthash].js',
+      app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
-      css: '[name].[contenthash].css',
+      chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
-      img: 'img/[name].[hash:7].[ext]',
+      css: ({ isDev }) => isDev ? '[name].js' : '[contenthash].css',
-      font: 'fonts/[name].[hash:7].[ext]',
+      img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]',
-      video: 'videos/[name].[hash:7].[ext]'
+      font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]',
+      video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]'
     },
     styleResources: {},
     plugins: [],

test/unit/basic.dev.test.js

@@ -1,3 +1,4 @@
+import consola from 'consola'
 import { Builder, getPort, loadFixture, Nuxt, rp } from '../utils'
 
 let port
@@ -16,8 +17,8 @@ describe('basic dev', () => {
       buildDir: '.nuxt-dev',
       build: {
         filenames: {
-          app: () => {
+          app: ({ isDev }) => {
-            return 'test-app.[contenthash].js'
+            return isDev ? 'test-app.js' : 'test-app.[contenthash].js'
           },
           chunk: 'test-[name].[contenthash].js'
         },
@@ -54,9 +55,11 @@ describe('basic dev', () => {
   })
 
   test('Config: build.filenames', () => {
-    expect(typeof output.filename).toBe('function')
+    expect(output.filename).toBe('test-app.js')
-    expect(output.filename()).toBe('test-app.js')
+    expect(output.chunkFilename).toBe('test-[name].[contenthash].js')
-    expect(output.chunkFilename).toBe('test-[name].js')
+    expect(consola.warn).toBeCalledWith(
+      'Notice: Please do not use contenthash in dev mode to prevent memory leak'
+    )
   })
 
   test('/stateless', async () => {