webpacker 6.0.0.beta.7 → 6.0.0.rc.2

data/package/environments/development.js

@@ -1,8 +1,8 @@
 const { merge } = require('webpack-merge')
-const webpack = require('webpack')
 
 const baseConfig = require('./base')
 const devServer = require('../dev_server')
+const { runningWebpackDevServer } = require('../env')
 
 const { outputPath: contentBase, publicPath } = require('../config')
 
@@ -11,14 +11,10 @@ let devConfig = {
   devtool: 'cheap-module-source-map'
 }
 
-if (
-  process.env.WEBPACK_DEV_SERVER &&
-  process.env.WEBPACK_DEV_SERVER !== 'undefined'
-) {
+if (runningWebpackDevServer) {
   if (devServer.hmr) {
     devConfig = merge(devConfig, {
-      output: { filename: '[name]-[hash].js' },
-      plugins: [new webpack.HotModuleReplacementPlugin()]
+      output: { filename: '[name]-[hash].js' }
     })
   }
 
@@ -33,8 +29,9 @@ if (
       https: devServer.https,
       hot: devServer.hmr,
       contentBase,
-      inline: devServer.inline,
-      injectClient: devServer.inject_client,
+      inline: devServer.inline || devServer.hmr,
+      injectClient: devServer.hmr,
+      injectHot: devServer.hmr,
       useLocalIp: devServer.use_local_ip,
       public: devServer.public,
       publicPath,
@@ -42,6 +39,7 @@ if (
       headers: devServer.headers,
       overlay: devServer.overlay,
       stats: {
+        colors: true,
         entrypoints: false,
         errorDetails: true,
         modules: false,

data/package/index.js

@@ -10,6 +10,7 @@ const config = require('./config')
 const devServer = require('./dev_server')
 const { nodeEnv } = require('./env')
 const { moduleExists, canProcess } = require('./utils/helpers')
+const inliningCss = require('./inliningCss')
 
 const webpackConfig = () => {
   const path = resolve(__dirname, 'environments', `${nodeEnv}.js`)
@@ -25,5 +26,6 @@ module.exports = {
   rules,
   moduleExists,
   canProcess,
+  inliningCss,
   ...webpackMerge
 }

data/package/inliningCss.js

@@ -0,0 +1,7 @@
+const { runningWebpackDevServer } = require('./env')
+const devServer = require('./dev_server')
+
+// This logic is tied to lib/webpacker/instance.rb
+const inliningCss = runningWebpackDevServer && devServer.hmr
+
+module.exports = inliningCss

data/package/rules/file.js

@@ -18,6 +18,6 @@ module.exports = {
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
   type: 'asset/resource',
   generator: {
-    filename: 'media/images/[hash][ext][query]'
+    filename: 'static/[hash][ext][query]'
   }
 }

data/package/rules/sass.js

@@ -9,8 +9,7 @@ module.exports = canProcess('sass-loader', (resolvedPath) =>
     {
       loader: resolvedPath,
       options: {
-        sassOptions: { includePaths },
-        implementation: require('sass')
+        sassOptions: { includePaths }
       }
     }
   ])

data/package/utils/get_style_rule.js

@@ -1,6 +1,6 @@
 /* eslint global-require: 0 */
-
 const { canProcess, moduleExists } = require('./helpers')
+const inliningCss = require('../inliningCss')
 
 const getStyleRule = (test, preprocessors = []) => {
   if (moduleExists('css-loader')) {
@@ -10,8 +10,10 @@ const getStyleRule = (test, preprocessors = []) => {
         options: { sourceMap: true }
       }))
 
+    // style-loader is required when using css modules with HMR on the webpack-dev-server
+
     const use = [
-      { loader: require('mini-css-extract-plugin').loader },
+      inliningCss ? 'style-loader' : require('mini-css-extract-plugin').loader,
       {
         loader: require.resolve('css-loader'),
         options: {

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-beta.7",
+  "version": "6.0.0-rc.2",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,40 +8,36 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.22.1 || ^12 || >=14",
-    "yarn": ">=1 <3"
+    "node": "^12 || >=14",
+    "yarn": ">=1 <4"
   },
   "dependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/runtime": "^7.15.3",
     "babel-loader": "^8.2.2",
-    "babel-plugin-macros": "^3.0.1",
-    "case-sensitive-paths-webpack-plugin": "^2.3.0",
-    "compression-webpack-plugin": "^7.1.0",
-    "core-js": "^3.8.0",
-    "glob": "^7.1.6",
-    "js-yaml": "^3.14.0",
+    "compression-webpack-plugin": "^7.1.2",
+    "glob": "^7.1.7",
+    "js-yaml": "^3.14.1",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.6.4",
-    "regenerator-runtime": "^0.13.7",
-    "terser-webpack-plugin": "^5.0.3",
-    "webpack": "^5.11.0",
-    "webpack-assets-manifest": "^5.0.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-merge": "^5.7.2",
-    "webpack-sources": "^2.2.0"
+    "pnp-webpack-plugin": "^1.7.0",
+    "terser-webpack-plugin": "^5.1.4",
+    "webpack": "^5.50.0",
+    "webpack-assets-manifest": "^5.0.6",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-sources": "^3.2.0"
   },
   "devDependencies": {
-    "eslint": "^7.16.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.4",
-    "jest": "^26.5.3"
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "jest": "^26.6.3"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/test/configuration_test.rb

@@ -44,7 +44,7 @@ class ConfigurationTest < Webpacker::Test
   end
 
   def test_cache_path
-    cache_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/tmp/cache/webpacker").to_s
+    cache_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/tmp/webpacker").to_s
     assert_equal @config.cache_path.to_s, cache_path
   end
 

data/test/dev_server_runner_test.rb

@@ -5,11 +5,13 @@ class DevServerRunnerTest < Webpacker::Test
   def setup
     @original_node_env, ENV["NODE_ENV"] = ENV["NODE_ENV"], "development"
     @original_rails_env, ENV["RAILS_ENV"] = ENV["RAILS_ENV"], "development"
+    @original_webpacker_config = ENV["WEBPACKER_CONFIG"]
   end
 
   def teardown
     ENV["NODE_ENV"] = @original_node_env
     ENV["RAILS_ENV"] = @original_rails_env
+    ENV["WEBPACKER_CONFIG"] = @original_webpacker_config
   end
 
   def test_run_cmd_via_node_modules
@@ -38,6 +40,7 @@ class DevServerRunnerTest < Webpacker::Test
     def dev_server.port; "3035"; end
     def dev_server.pretty?; false; end
     def dev_server.https?; true; end
+    def dev_server.hmr?; false; end
     Webpacker::DevServer.stub(:new, dev_server) do
       verify_command(cmd, argv: ["--https"])
     end
@@ -46,7 +49,7 @@ class DevServerRunnerTest < Webpacker::Test
   def test_environment_variables
     cmd = ["#{test_app_path}/node_modules/.bin/webpack", "serve", "--config", "#{test_app_path}/config/webpack/development.js"]
     env = Webpacker::Compiler.env.dup
-    env["WEBPACKER_CONFIG"] = "#{test_app_path}/config/webpacker.yml"
+    ENV["WEBPACKER_CONFIG"] = env["WEBPACKER_CONFIG"] = "#{test_app_path}/config/webpacker_other_location.yml"
     env["WEBPACK_DEV_SERVER"] = "true"
     verify_command(cmd, env: env)
   end

data/test/helper_test.rb

@@ -26,18 +26,18 @@ class HelperTest < ActionView::TestCase
 
   def test_image_pack_path
     assert_equal "/packs/application-k344a6d59eef8632c9d1.png", image_pack_path("application.png")
-    assert_equal "/packs/media/images/image-c38deda30895059837cf.jpg", image_pack_path("image.jpg")
-    assert_equal "/packs/media/images/image-c38deda30895059837cf.jpg", image_pack_path("media/images/image.jpg")
-    assert_equal "/packs/media/images/nested/image-c38deda30895059837cf.jpg", image_pack_path("nested/image.jpg")
-    assert_equal "/packs/media/images/nested/image-c38deda30895059837cf.jpg", image_pack_path("media/images/nested/image.jpg")
+    assert_equal "/packs/static/image-c38deda30895059837cf.jpg", image_pack_path("image.jpg")
+    assert_equal "/packs/static/image-c38deda30895059837cf.jpg", image_pack_path("static/image.jpg")
+    assert_equal "/packs/static/nested/image-c38deda30895059837cf.jpg", image_pack_path("nested/image.jpg")
+    assert_equal "/packs/static/nested/image-c38deda30895059837cf.jpg", image_pack_path("static/nested/image.jpg")
   end
 
   def test_image_pack_url
     assert_equal "https://example.com/packs/application-k344a6d59eef8632c9d1.png", image_pack_url("application.png")
-    assert_equal "https://example.com/packs/media/images/image-c38deda30895059837cf.jpg", image_pack_url("image.jpg")
-    assert_equal "https://example.com/packs/media/images/image-c38deda30895059837cf.jpg", image_pack_url("media/images/image.jpg")
-    assert_equal "https://example.com/packs/media/images/nested/image-c38deda30895059837cf.jpg", image_pack_url("nested/image.jpg")
-    assert_equal "https://example.com/packs/media/images/nested/image-c38deda30895059837cf.jpg", image_pack_url("media/images/nested/image.jpg")
+    assert_equal "https://example.com/packs/static/image-c38deda30895059837cf.jpg", image_pack_url("image.jpg")
+    assert_equal "https://example.com/packs/static/image-c38deda30895059837cf.jpg", image_pack_url("static/image.jpg")
+    assert_equal "https://example.com/packs/static/nested/image-c38deda30895059837cf.jpg", image_pack_url("nested/image.jpg")
+    assert_equal "https://example.com/packs/static/nested/image-c38deda30895059837cf.jpg", image_pack_url("static/nested/image.jpg")
   end
 
   def test_image_pack_tag
@@ -45,20 +45,20 @@ class HelperTest < ActionView::TestCase
       "<img alt=\"Edit Entry\" src=\"/packs/application-k344a6d59eef8632c9d1.png\" width=\"16\" height=\"10\" />",
       image_pack_tag("application.png", size: "16x10", alt: "Edit Entry")
     assert_equal \
-      "<img alt=\"Edit Entry\" src=\"/packs/media/images/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      "<img alt=\"Edit Entry\" src=\"/packs/static/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
       image_pack_tag("image.jpg", size: "16x10", alt: "Edit Entry")
     assert_equal \
-      "<img alt=\"Edit Entry\" src=\"/packs/media/images/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
-      image_pack_tag("media/images/image.jpg", size: "16x10", alt: "Edit Entry")
+      "<img alt=\"Edit Entry\" src=\"/packs/static/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      image_pack_tag("static/image.jpg", size: "16x10", alt: "Edit Entry")
     assert_equal \
-      "<img alt=\"Edit Entry\" src=\"/packs/media/images/nested/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      "<img alt=\"Edit Entry\" src=\"/packs/static/nested/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
       image_pack_tag("nested/image.jpg", size: "16x10", alt: "Edit Entry")
     assert_equal \
-      "<img alt=\"Edit Entry\" src=\"/packs/media/images/nested/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
-      image_pack_tag("media/images/nested/image.jpg", size: "16x10", alt: "Edit Entry")
+      "<img alt=\"Edit Entry\" src=\"/packs/static/nested/image-c38deda30895059837cf.jpg\" width=\"16\" height=\"10\" />",
+      image_pack_tag("static/nested/image.jpg", size: "16x10", alt: "Edit Entry")
     assert_equal \
-      "<img srcset=\"/packs/media/images/image-2x-7cca48e6cae66ec07b8e.jpg 2x\" src=\"/packs/media/images/image-c38deda30895059837cf.jpg\" />",
-      image_pack_tag("media/images/image.jpg", srcset: { "media/images/image-2x.jpg" => "2x" })
+      "<img srcset=\"/packs/static/image-2x-7cca48e6cae66ec07b8e.jpg 2x\" src=\"/packs/static/image-c38deda30895059837cf.jpg\" />",
+      image_pack_tag("static/image.jpg", srcset: { "static/image-2x.jpg" => "2x" })
   end
 
   def test_favicon_pack_tag
@@ -66,17 +66,17 @@ class HelperTest < ActionView::TestCase
       "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/application-k344a6d59eef8632c9d1.png\" />",
       favicon_pack_tag("application.png", rel: "apple-touch-icon", type: "image/png")
     assert_equal \
-      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/media/images/mb-icon-c38deda30895059837cf.png\" />",
+      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/static/mb-icon-c38deda30895059837cf.png\" />",
       favicon_pack_tag("mb-icon.png", rel: "apple-touch-icon", type: "image/png")
     assert_equal \
-      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/media/images/mb-icon-c38deda30895059837cf.png\" />",
-      favicon_pack_tag("media/images/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
+      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/static/mb-icon-c38deda30895059837cf.png\" />",
+      favicon_pack_tag("static/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
     assert_equal \
-      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/media/images/nested/mb-icon-c38deda30895059837cf.png\" />",
+      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/static/nested/mb-icon-c38deda30895059837cf.png\" />",
       favicon_pack_tag("nested/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
     assert_equal \
-      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/media/images/nested/mb-icon-c38deda30895059837cf.png\" />",
-      favicon_pack_tag("media/images/nested/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
+      "<link rel=\"apple-touch-icon\" type=\"image/png\" href=\"/packs/static/nested/mb-icon-c38deda30895059837cf.png\" />",
+      favicon_pack_tag("static/nested/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
   end
 
   def test_preload_pack_asset
@@ -96,12 +96,21 @@ class HelperTest < ActionView::TestCase
   end
 
   def test_javascript_pack_tag
+    assert_equal \
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js" defer="defer"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js" defer="defer"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js" defer="defer"></script>\n) +
+        %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js" defer="defer"></script>),
+      javascript_pack_tag("application", "bootstrap")
+  end
+
+  def test_javascript_pack_with_no_defer_tag
     assert_equal \
       %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
         %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
         %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>\n) +
         %(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
-      javascript_pack_tag("application", "bootstrap")
+      javascript_pack_tag("application", "bootstrap", defer: false)
   end
 
   def test_javascript_pack_tag_splat
@@ -114,32 +123,37 @@ class HelperTest < ActionView::TestCase
 
   def test_javascript_pack_tag_symbol
     assert_equal \
-      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
-        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
-        %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js" defer="defer"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js" defer="defer"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js" defer="defer"></script>),
       javascript_pack_tag(:application)
   end
 
+  def application_stylesheet_chunks
+    %w[/packs/1-c20632e7baf2c81200d3.chunk.css /packs/application-k344a6d59eef8632c9d1.chunk.css]
+  end
+
+  def hello_stimulus_stylesheet_chunks
+    %w[/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css]
+  end
+
   def test_stylesheet_pack_tag
     assert_equal \
-      %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
+      (application_stylesheet_chunks + hello_stimulus_stylesheet_chunks)
+        .map { |chunk| stylesheet_link_tag(chunk) }.join("\n"),
       stylesheet_pack_tag("application", "hello_stimulus")
   end
 
   def test_stylesheet_pack_tag_symbol
     assert_equal \
-      %(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
+      (application_stylesheet_chunks + hello_stimulus_stylesheet_chunks)
+        .map { |chunk| stylesheet_link_tag(chunk) }.join("\n"),
       stylesheet_pack_tag(:application, :hello_stimulus)
   end
 
   def test_stylesheet_pack_tag_splat
     assert_equal \
-      %(<link rel="stylesheet" media="all" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
-        %(<link rel="stylesheet" media="all" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />),
+      (application_stylesheet_chunks).map { |chunk| stylesheet_link_tag(chunk, media: "all") }.join("\n"),
       stylesheet_pack_tag("application", media: "all")
   end
 end

data/test/manifest_test.rb

@@ -26,11 +26,19 @@ class ManifestTest < Minitest::Test
   end
 
   def test_lookup_with_chunks_without_extension_success!
-    assert_equal Webpacker.manifest.lookup_pack_with_chunks!("bootstrap", type: :javascript), ["/packs/bootstrap-300631c4f0e0f9c865bc.js"]
+    assert_equal ["/packs/bootstrap-300631c4f0e0f9c865bc.js"], Webpacker.manifest.lookup_pack_with_chunks!("bootstrap", type: :javascript)
   end
 
   def test_lookup_with_chunks_with_extension_success!
-    assert_equal Webpacker.manifest.lookup_pack_with_chunks!("bootstrap.js", type: :javascript), ["/packs/bootstrap-300631c4f0e0f9c865bc.js"]
+    assert_equal ["/packs/bootstrap-300631c4f0e0f9c865bc.js"], Webpacker.manifest.lookup_pack_with_chunks!("bootstrap.js", type: :javascript)
+  end
+
+  def test_lookup_with_chunks_without_extension_subdir_success!
+    assert_equal ["/packs/print/application-983b6c164a47f7ed49cd.css"], Webpacker.manifest.lookup_pack_with_chunks!("print/application", type: :css)
+  end
+
+  def test_lookup_with_chunks_with_extension_subdir_success!
+    assert_equal ["/packs/print/application-983b6c164a47f7ed49cd.css"], Webpacker.manifest.lookup_pack_with_chunks!("print/application.css", type: :css)
   end
 
   def test_lookup_nil

data/test/mounted_app/test/dummy/config/webpacker.yml

@@ -4,7 +4,7 @@ default: &default
   source_path: app/packs
   source_entry_path: entrypoints
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
+  cache_path: tmp/webpacker
 
   # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']

data/test/test_app/config/webpacker.yml

@@ -5,7 +5,7 @@ default: &default
   source_entry_path: entrypoints
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
+  cache_path: tmp/webpacker
   webpack_compile_output: false
 
   # Additional paths webpack should look up modules
@@ -43,8 +43,6 @@ development:
     port: 3035
     public: localhost:3035
     hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
     overlay: true
     disable_host_check: true
     use_local_ip: false

data/test/test_app/config/webpacker_other_location.yml

@@ -0,0 +1,79 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/packs
+  source_entry_path: entrypoints
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+  webpack_compile_output: false
+
+  # Additional paths webpack should look up modules
+  # ['app/assets', 'engine/foo/app/assets']
+  additional_paths:
+    - app/assets
+    - /etc/yarn
+    - some.config.js
+    - app/elm
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+
+  extensions:
+    - .mjs
+    - .js
+
+development:
+  <<: *default
+  compile: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    disable_host_check: true
+    use_local_ip: false
+    pretty: false
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
+
+staging:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
+
+  # Compile staging packs to a separate directory
+  public_output_path: packs-staging