fix(webpack): allow changing devtool with extend (#4515)

packages/webpack/src/config/base.js

@@ -397,6 +397,16 @@ export default class WebpackBaseConfig {
     }
 
     // Clone deep avoid leaking config between Client and Server
-    return this.extendConfig(cloneDeep(config))
+    const extendedConfig = this.extendConfig(cloneDeep(config))
+    const { optimization } = extendedConfig
+    // Todo remove in nuxt 3 in favor of devtool config property or https://webpack.js.org/plugins/source-map-dev-tool-plugin
+    if (optimization && optimization.minimizer && extendedConfig.devtool) {
+      const terser = optimization.minimizer.find(p => p instanceof TerserWebpackPlugin)
+      if (terser) {
+        terser.options.sourceMap = extendedConfig.devtool && /source-?map/.test(extendedConfig.devtool)
+      }
+    }
+
+    return extendedConfig
   }
 }

test/fixtures/with-config/nuxt.config.js

@@ -73,7 +73,7 @@ export default {
     transpile: 'vue-test',
     extend(config, options) {
       return Object.assign({}, config, {
-        devtool: 'nosources-source-map'
+        devtool: '#source-map'
       })
     }
   },

test/unit/basic.config.defaults.test.js

@@ -1,8 +1,12 @@
 import { resolve } from 'path'
 import consola from 'consola'
+import Glob from 'glob'
+import pify from 'pify'
 
 import { Nuxt, getNuxtConfig, version } from '../utils'
 
+const glob = pify(Glob)
+
 describe('basic config defaults', () => {
   test('Nuxt.version is same as package', () => {
     expect(Nuxt.version).toBe(version)
@@ -14,6 +18,11 @@ describe('basic config defaults', () => {
     expect(options.modulesDir).toContain(currentNodeModulesDir)
   })
 
+  test('client source map not generated', async () => {
+    const mapFiles = await glob(resolve(__dirname, '..', 'fixtures/basic/.nuxt/dist/client/*.js.map'))
+    expect(mapFiles.length).toEqual(0)
+  })
+
   test('vendor has been deprecated', () => {
     const options = getNuxtConfig({
       build: { vendor: 'vue' }

test/unit/with-config.test.js

@@ -1,6 +1,12 @@
+import { resolve } from 'path'
+import { existsSync } from 'fs'
 import jsdom from 'jsdom'
+import Glob from 'glob'
+import pify from 'pify'
 import { getPort, loadFixture, Nuxt, rp } from '../utils'
 
+const glob = pify(Glob)
+
 let port
 const url = route => 'http://localhost:' + port + route
 
@@ -14,6 +20,13 @@ describe('with-config', () => {
     await nuxt.server.listen(port, 'localhost')
   })
 
+  test('client source map generated', async () => {
+    const jsFiles = await glob(resolve(__dirname, '..', 'fixtures/with-config/.nuxt/dist/client/*.js'))
+    for (const file of jsFiles) {
+      expect(existsSync(`${file}.map`)).toBe(true)
+    }
+  })
+
   test('/', async () => {
     const { html } = await nuxt.server.renderRoute('/')
     expect(html).toContain('<h1>I have custom configurations</h1>')