Disambiguate the [name] replacement

tools/webpack/config/base-webpack-config.js

@@ -39,6 +39,7 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
     DEV_SERVER_PORT,
     DEV_SOURCE_PORT,
     DEVELOPMENT,
+    ENTRY_NAME,
     IS_DEVELOPMENT_ENV,
     IS_PRODUCTION_ENV,
     IS_TEST_ENV,
@@ -50,6 +51,37 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
     WP_ENV
   } = vars
 
+  /**
+   * The `[name]` replacement convention can mean different things depending to
+   * Webpack's core code and to different plugins and loaders. Generally it
+   * falls into one of two categories:
+   *
+   * -   The entry point's name. When a name isn't explicitly defined, the
+   *     default name is `main`.
+   *     -   Webpack Configuration Options
+   *     -   Webpack Loader Utilities
+   *     -   Mini CSS Extract Plugin
+   * -   The resource file's basename (the file name without the file extension)
+   *     -   file-loader
+   *
+   * Depending on the project's conventions, the entry point name may or may not
+   * be intended to also be the built bundle's name.
+   *
+   * To avoid ambiguity, we won't use `[name]` in replacements. Instead we will
+   * create a constant in our config file. This will work fine for simple
+   * Webpack configurations, but more complex ones with multiple end points may
+   * quickly become more difficult to maintain.
+   *
+   * Ideally, Webpack core code, loader utilities, etc. and third party code
+   * (plugins and loaders) would adopt a convention that would allow explicitly
+   * identifying your intent, perhaps something like `[entryname]` and
+   * `[resourcename]`, while leaving `[name]` untouched for backwards
+   * compatibility.
+   *
+   * Adjust as needed.
+   */
+  const BUNDLE_NAME = ENTRY_NAME
+
   /**
    * Set mode based on the `NODE_ENV` environment variable, but give priority
    * to the `--mode` command line argument, if defined.
@@ -62,8 +94,8 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
       : 'none'
 
   const miniStylesExtract = new MiniCssExtractPlugin({
-    filename: '_assets/bundles/[name]/[name].bundle.[hash:20].css',
-    chunkFilename: '_assets/bundles/[name]/[id].css'
+    filename: `_assets/bundles/${BUNDLE_NAME}/${BUNDLE_NAME}.bundle.[hash:20].css`,
+    chunkFilename: `_assets/bundles/${BUNDLE_NAME}/[id].css`
   })
 
   var webpackConfig = {
@@ -88,7 +120,7 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
           test: /\.(ani|cur|gif|ico|jpeg|jpg|png|webp)$/,
           loader: 'file-loader',
           options: {
-            name: '_assets/bundles/common/images/[name].[hash:20].[ext]'
+            name: `_assets/bundles/${BUNDLE_NAME}/images/[name].[hash:20].[ext]`
           }
         },
 
@@ -97,7 +129,7 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
           test: /\.(eot|otf|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {
-            name: '_assets/bundles/common/fonts/[name].[hash:20].[ext]'
+            name: `_assets/bundles/${BUNDLE_NAME}/fonts/[name].[hash:20].[ext]`
           }
         },
 
@@ -118,7 +150,7 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
               isImage = false
               isFont = false
 
-              name = '_assets/bundles/common/'
+              name = `_assets/bundles/${BUNDLE_NAME}/`
               if (isImage) {
                 name += 'images/'
               } else if (isFont) {
@@ -138,7 +170,7 @@ function makeBaseWebpackConfig(cliEnvironment, argv, vars) {
     output: {
       path: PATH_TO_DIST,
       publicPath: '/',
-      filename: '_assets/bundles/[name]/[name].[hash:20].js'
+      filename: `_assets/bundles/${BUNDLE_NAME}/${BUNDLE_NAME}.[hash:20].js`
     },
     devServer: {
       contentBase: PATH_TO_PUBLIC,

tools/webpack/config/base-webpack-vars.js

@@ -6,6 +6,7 @@ const VARS = {
   DEV_SERVER_PATHNAME: commonConfig.webServer.pathname || '/',
   DEV_SERVER_PORT: 8080,
   DEV_SOURCE_PORT: commonConfig.sourcesProxyServer.http.port || 3000,
+  ENTRY_NAME: 'main',
   PATH_TO_DIST: path.resolve(__dirname, '../../../.tmp/dist/'),
   PATH_TO_PUBLIC: path.resolve(__dirname, '../../../static/'),
   PATH_TO_REPO_ROOT: path.resolve(__dirname, '../../../'),

tools/webpack/config/css.webpack.config.js

@@ -17,10 +17,13 @@ function makeWebpackConfig(cliEnvironment, argv) {
     DEV_SERVER_PORT: commonConfig.webServer.port.css,
     PATH_TO_DIST: path.resolve(__dirname, '../../../.tmp/dist/css-stack/')
   })
-  const { PATH_TO_SOURCE } = vars
+  const { ENTRY_NAME, PATH_TO_SOURCE } = vars
   const webpackConfig = baseWebpackConfig(cliEnvironment, argv, vars)
 
-  webpackConfig.entry.main = path.resolve(PATH_TO_SOURCE, 'index.css.jsx')
+  webpackConfig.entry[ENTRY_NAME] = path.resolve(
+    PATH_TO_SOURCE,
+    'index.css.jsx'
+  )
   webpackConfig.module.rules.push(
     // STYLESHEETS: CSS
     {

tools/webpack/config/fullstack.webpack.config.js

@@ -21,14 +21,18 @@ function makeWebpackConfig(cliEnvironment, argv) {
     )
   })
   const {
+    ENTRY_NAME,
     IS_PRODUCTION_ENV,
     PATH_TO_SOURCE,
     POSTCSS_CONFIG_PATH,
     WP_ENV
   } = vars
   const webpackConfig = baseWebpackConfig(cliEnvironment, argv, vars)
 
-  webpackConfig.entry.main = path.resolve(PATH_TO_SOURCE, 'index.sass.jsx')
+  webpackConfig.entry[ENTRY_NAME] = path.resolve(
+    PATH_TO_SOURCE,
+    'index.sass.jsx'
+  )
   // Uncomment the following if for some reason you needed to use both Sass and
   // CSS
   // webpackConfig.module.rules.push(

tools/webpack/config/postcss.webpack.config.js

@@ -18,14 +18,18 @@ function makeWebpackConfig(cliEnvironment, argv) {
     PATH_TO_DIST: path.resolve(__dirname, '../../../.tmp/dist/postcss-stack/')
   })
   const {
+    ENTRY_NAME,
     IS_PRODUCTION_ENV,
     PATH_TO_SOURCE,
     POSTCSS_CONFIG_PATH,
     WP_ENV
   } = vars
   const webpackConfig = baseWebpackConfig(cliEnvironment, argv, vars)
 
-  webpackConfig.entry.main = path.resolve(PATH_TO_SOURCE, 'index.css.jsx')
+  webpackConfig.entry[ENTRY_NAME] = path.resolve(
+    PATH_TO_SOURCE,
+    'index.css.jsx'
+  )
   webpackConfig.module.rules.push(
     // STYLESHEETS: CSS
     {

tools/webpack/config/sass.webpack.config.js

@@ -17,10 +17,13 @@ function makeWebpackConfig(cliEnvironment, argv) {
     DEV_SERVER_PORT: commonConfig.webServer.port.sass,
     PATH_TO_DIST: path.resolve(__dirname, '../../../.tmp/dist/sass-stack/')
   })
-  const { PATH_TO_SOURCE } = vars
+  const { ENTRY_NAME, PATH_TO_SOURCE } = vars
   const webpackConfig = baseWebpackConfig(cliEnvironment, argv, vars)
 
-  webpackConfig.entry.main = path.resolve(PATH_TO_SOURCE, 'index.sass.jsx')
+  webpackConfig.entry[ENTRY_NAME] = path.resolve(
+    PATH_TO_SOURCE,
+    'index.sass.jsx'
+  )
   webpackConfig.module.rules.push(
     // STYLESHEETS: SASS
     {