Keep chunks filenames in production mode (#5029)

* Keep chunks filenames in production mode

* Add test for new `[name]` behavior

* Rename static/dll to static/development/dll

build/webpack.js

@@ -181,7 +181,7 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
       hotUpdateChunkFilename: 'static/webpack/[id].[hash].hot-update.js',
       hotUpdateMainFilename: 'static/webpack/[hash].hot-update.json',
       // This saves chunks with the name given via `import()`
-      chunkFilename: isServer ? `${dev ? '[name]' : '[contenthash]'}.js` : `static/chunks/${dev ? '[name]' : '[contenthash]'}.js`,
+      chunkFilename: isServer ? `${dev ? '[name]' : '[name].[contenthash]'}.js` : `static/chunks/${dev ? '[name]' : '[name].[contenthash]'}.js`,
       strictModuleExceptionHandling: true
     },
     performance: { hints: false },
@@ -213,7 +213,7 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
       // Precompile react / react-dom for development, speeding up webpack
       dev && !isServer && new AutoDllPlugin({
         filename: '[name]_[hash].js',
-        path: './static/dll',
+        path: './static/development/dll',
         context: dir,
         entry: {
           dll: [

build/webpack/plugins/build-manifest-plugin.js

@@ -15,7 +15,7 @@ export default class BuildManifestPlugin {
 
       for (const filePath of Object.keys(compilation.assets)) {
         const path = filePath.replace(/\\/g, '/')
-        if (/^static\/dll\//.test(path)) {
+        if (/^static\/development\/dll\//.test(path)) {
           assetMap.devFiles.push(path)
         }
       }

test/integration/basic/components/hello-chunkfilename.js

@@ -0,0 +1 @@
+export default () => <div>test chunkfilename</div>

test/integration/basic/pages/dynamic/chunkfilename.js

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(import(/* webpackChunkName: 'hello-world' */'../../components/hello-chunkfilename'))
+
+export default Hello

test/integration/basic/test/dynamic.js

@@ -63,6 +63,26 @@ export default (context, render) => {
       })
     })
 
+    describe('custom chunkfilename', () => {
+      it('should render the correct filename', async () => {
+        const $ = await get$('/dynamic/chunkfilename')
+        expect($('body').text()).toMatch(/test chunkfilename/)
+        expect($('html').html()).toMatch(/hello-world\.js/)
+      })
+
+      it('should render the component on client side', async () => {
+        let browser
+        try {
+          browser = await webdriver(context.appPort, '/dynamic/chunkfilename')
+          await check(() => browser.elementByCss('body').text(), /test chunkfilename/)
+        } finally {
+          if (browser) {
+            browser.close()
+          }
+        }
+      })
+    })
+
     describe('custom loading', () => {
       it('should render custom loading on the server side when `ssr:false` and `loading` is provided', async () => {
         const $ = await get$('/dynamic/no-ssr-custom-loading')