Output generated files under an assets/ subdirectory (#1174)

This makes it easier to write `Cache-Control` header rules for files with hashed filenames, since the web server rule can now just match the entire `assets/` directory rather than having to use false-positive prone regex to match the hash in the filename. In addition, this PR removes some redundant configuration: * The `@neutrinojs/node` and `@neutrinojs/library` presets no longer set `output.filename` / `output.chunkFilename`, since they were previously only being set to the defaults anyway. * The `@neutrinojs/web` preset no longer sets `output.chunkFilename` since by default it inherits from `output.filename`, so setting both to the same value is redundant: https://github.com/webpack/webpack/blob/v4.20.2/lib/WebpackOptionsDefaulter.js#L102-L112 Fixes #1172.
neutrinojs · Oct 15, 2018 · 6bef97a · 6bef97a
1 parent 701f353
commit 6bef97a
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 22 deletions.
diff --git a/docs/migration-guide.md b/docs/migration-guide.md
@@ -195,10 +195,11 @@ so async functions will not be de-sugared to Promises by default any more [#790]
 This means the preset option of `polyfills.async` has been removed.
 - **BREAKING CHANGE** The output format from `neutrino --inspect` has changed and is equivalent to the
 `neutrino --inspect-new` in Neutrino v8 [#928](https://github.com/neutrinojs/neutrino/pull/928).
-- **BREAKING CHANGE** The length of hashes in built filenames has been shortened to 8 characters
-[#930](https://github.com/neutrinojs/neutrino/pull/930). This will
-cause potential hash changes for changed files and if you use regex rules to manage web server caches, those must be
-updated.
+- **BREAKING CHANGE** The path and filename of built files has changed. Files with hashed filenames
+are now output under an `assets/` subdirectory, and the hash has been shortened to 8 characters
+[#930](https://github.com/neutrinojs/neutrino/pull/930) and [#1174](https://github.com/neutrinojs/neutrino/pull/1174).
+If you set custom headers for these files in your web server configuration (such as a long-expiry
+`Cache-Control` header), the rules/regex for them will need to be updated.
 - **BREAKING CHANGE** Module resolution now uses the [webpack 4 defaults](https://webpack.js.org/configuration/resolve/#resolve-modules)
 [#926](https://github.com/neutrinojs/neutrino/pull/926). This means that the option `neutrino.options.node_modules`
 has been removed.

diff --git a/packages/font-loader/README.md b/packages/font-loader/README.md
@@ -42,7 +42,9 @@ neutrino.use(fonts);
 
 // Usage showing default options
 neutrino.use(fonts, {
-  name: process.env.NODE_ENV === 'production' ? '[name].[hash:8].[ext]' : '[name].[ext]'
+  name: process.env.NODE_ENV === 'production'
+    ? 'assets/[name].[hash:8].[ext]'
+    : 'assets/[name].[ext]'
 });
 ```
 
@@ -58,7 +60,9 @@ module.exports = {
 module.exports = {
   use: [
     ['@neutrinojs/font-loader', {
-      name: process.env.NODE_ENV === 'production' ? '[name].[hash:8].[ext]' : '[name].[ext]'
+      name: process.env.NODE_ENV === 'production'
+        ? 'assets/[name].[hash:8].[ext]'
+        : 'assets/[name].[ext]'
     }]
   ]
 };

diff --git a/packages/font-loader/index.js b/packages/font-loader/index.js
@@ -4,7 +4,7 @@ module.exports = (neutrino, options = {}) => {
   const ruleId = 'font';
   const isProduction = process.env.NODE_ENV === 'production';
   const defaultOptions = {
-    name: isProduction ? '[name].[hash:8].[ext]' : '[name].[ext]'
+    name: isProduction ? 'assets/[name].[hash:8].[ext]' : 'assets/[name].[ext]'
   };
 
   if (neutrino.config.module.rules.has(ruleId)) {

diff --git a/packages/image-loader/README.md b/packages/image-loader/README.md
@@ -43,7 +43,9 @@ neutrino.use(images);
 // Usage showing default options
 neutrino.use(images, {
   limit: 8192,
-  name: process.env.NODE_ENV === 'production' ? '[name].[hash:8].[ext]' : '[name].[ext]'
+  name: process.env.NODE_ENV === 'production'
+    ? 'assets/[name].[hash:8].[ext]'
+    : 'assets/[name].[ext]'
 });
 ```
 
@@ -60,7 +62,9 @@ module.exports = {
   use: [
     ['@neutrinojs/image-loader', {
       limit: 8192,
-      name: process.env.NODE_ENV === 'production' ? '[name].[hash:8].[ext]' : '[name].[ext]'
+      name: process.env.NODE_ENV === 'production'
+        ? 'assets/[name].[hash:8].[ext]'
+        : 'assets/[name].[ext]'
     }]
   ]
 };

diff --git a/packages/image-loader/index.js b/packages/image-loader/index.js
@@ -5,7 +5,7 @@ module.exports = (neutrino, options = {}) => {
   const isProduction = process.env.NODE_ENV === 'production';
   const defaultOptions = {
     limit: 8192,
-    name: isProduction ? '[name].[hash:8].[ext]' : '[name].[ext]'
+    name: isProduction ? 'assets/[name].[hash:8].[ext]' : 'assets/[name].[ext]'
   };
 
   if (neutrino.config.module.rules.has(ruleId)) {

diff --git a/packages/library/index.js b/packages/library/index.js
@@ -72,7 +72,6 @@ module.exports = (neutrino, opts = {}) => {
     .output
       .path(neutrino.options.output)
       .library(options.name)
-      .filename('[name].js')
       .libraryTarget(options.libraryTarget)
       .when(options.libraryTarget === 'umd', (output) => output.umdNamedDefine(true))
       .end()

diff --git a/packages/node/index.js b/packages/node/index.js
@@ -73,9 +73,7 @@ module.exports = (neutrino, opts = {}) => {
     .context(neutrino.options.root)
     .output
       .path(neutrino.options.output)
-      .filename('[name].js')
       .libraryTarget('commonjs2')
-      .chunkFilename('[name].js')
       .end()
     .resolve
       .extensions

diff --git a/packages/react-components/index.js b/packages/react-components/index.js
@@ -12,7 +12,15 @@ module.exports = (neutrino, opts = {}) => {
     },
     manifest: process.env.NODE_ENV === 'development',
     externals: opts.externals !== false && {},
-    style: { extract: { plugin: { filename: '[name].css' } } },
+    style: {
+      extract: {
+        plugin: {
+          // Override the @neutrinojs/react production behaviour of hashed CSS
+          // filenames, and output to the build root, not an `assets/` subdirectory.
+          filename: '[name].css'
+        }
+      }
+    },
     devtool: {
       production: 'source-map'
     },
@@ -55,6 +63,7 @@ module.exports = (neutrino, opts = {}) => {
           .runtimeChunk(false)
           .end()
         .output
+          // Override hashed filename/subdirectory usage inherited from @neutrinojs/react.
           .filename('[name].js')
           .library('[name]')
           .libraryTarget('umd')

diff --git a/packages/style-loader/README.md b/packages/style-loader/README.md
@@ -66,7 +66,9 @@ neutrino.use(styles, {
   extract: {
     loader: {},
     plugin: {
-      filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash:8].css' : '[name].css'
+      filename: process.env.NODE_ENV === 'production'
+        ? 'assets/[name].[contenthash:8].css'
+        : 'assets/[name].css'
     }
   }
 });
@@ -100,7 +102,9 @@ module.exports = {
       extract: {
         loader: {},
         plugin: {
-          filename: process.env.NODE_ENV === 'production' ? '[name].[contenthash:8].css' : '[name].css'
+          filename: process.env.NODE_ENV === 'production'
+            ? 'assets/[name].[contenthash:8].css'
+            : 'assets/[name].css'
         }
       }
     }]

diff --git a/packages/style-loader/index.js b/packages/style-loader/index.js
@@ -23,8 +23,8 @@ module.exports = (neutrino, opts = {}) => {
       loader: {},
       plugin: {
         filename: process.env.NODE_ENV === 'production'
-          ? '[name].[contenthash:8].css'
-          : '[name].css'
+          ? 'assets/[name].[contenthash:8].css'
+          : 'assets/[name].css'
       }
     }
   }, opts);

diff --git a/packages/web/index.js b/packages/web/index.js
@@ -176,8 +176,6 @@ module.exports = (neutrino, opts = {}) => {
       }
     });
 
-  const jsFilename = isProduction ? '[name].[contenthash:8].js' : '[name].js';
-
   neutrino.config
     .optimization
       .minimize(options.minify.source)
@@ -221,8 +219,7 @@ module.exports = (neutrino, opts = {}) => {
     .output
       .path(neutrino.options.output)
       .publicPath(options.publicPath)
-      .filename(jsFilename)
-      .chunkFilename(jsFilename)
+      .filename(isProduction ? 'assets/[name].[contenthash:8].js' : 'assets/[name].js')
       .end()
     .resolve
       .extensions