Fix distDir layout for advanced webpack features

README.md

@@ -40,7 +40,7 @@ If you'd rather not have to run the two processes separately by hand, you can us
 Alternatively, you can run `./bin/webpack-dev-server`. This will launch a
 [Webpack Dev Server](https://webpack.github.io/docs/webpack-dev-server.html) listening on http://localhost:8080/
 serving your pack files. It will recompile your files as you make changes. You also need to set
-`config.x.webpacker[:dev_server_host]` in your `config/environments/development.rb` to tell Webpacker to load
+`config.x.webpacker[:dev_server_host]` in your `config/environments/development.rb` and uncomment the `output.publicPath` line in your `config/webpack/development.js` to tell Webpacker to load
 your packs from the Webpack Dev Server. This setup allows you to leverage advanced Webpack features, such
 as [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement-with-webpack.html).
 

lib/install/bin/webpack-dev-server.tt

@@ -21,5 +21,5 @@ unless File.foreach(File.join(APP_PATH, RAILS_ENV_CONFIG)).detect { |line| line.
 end
 
 Dir.chdir(APP_PATH) do
-  exec "#{SET_NODE_PATH} #{WEBPACKER_BIN} --config #{WEBPACK_CONFIG} --content-base #{APP_PATH}/public/packs #{ARGV.join(" ")}"
+  exec "#{SET_NODE_PATH} #{WEBPACKER_BIN} --config #{WEBPACK_CONFIG} --content-base #{APP_PATH}/public/dist #{ARGV.join(" ")}"
 end

lib/install/config/development.js

@@ -13,7 +13,9 @@ module.exports = merge(sharedConfig.config, {
   },
 
   output: {
-    pathinfo: true
+    pathinfo: true,
+    // Make sure additional assets are loaded through webpack-dev-server
+    // publicPath: 'http://localhost:8080/'
   },
 
   plugins: [

lib/install/config/shared.js

@@ -8,17 +8,21 @@ const extname = require('path-complete-extname')
 let distDir = process.env.WEBPACK_DIST_DIR
 
 if (distDir === undefined) {
-  distDir = 'packs'
+  distDir = 'dist'
 }
 
 config = {
   entry: glob.sync(path.join('app', 'javascript', 'packs', '*.js*')).reduce((map, entry) => {
     const basename = path.basename(entry, extname(entry))
-    map[basename] = path.resolve(entry)
+    map['packs/' + basename] = path.resolve(entry)
     return map
   }, {}),
 
-  output: { filename: '[name].js', path: path.resolve('public', distDir) },
+  output: {
+    filename: '[name].js',
+    path: path.resolve('public', distDir),
+    publicPath: '/dist/'
+  },
 
   module: {
     rules: [

lib/install/template.rb

@@ -6,7 +6,7 @@
 directory "#{__dir__}/config", 'config/webpack'
 
 append_to_file '.gitignore', <<-EOS
-/public/packs
+/public/dist
 /node_modules
 EOS
 

lib/webpacker/helper.rb

@@ -2,7 +2,7 @@
 
 module Webpacker::Helper
   # Creates a script tag that references the named pack file, as compiled by Webpack per the entries list
-  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in 
+  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
   #
   # Examples:
@@ -13,7 +13,7 @@ module Webpacker::Helper
   #
   #   # In production mode:
   #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
-  #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+  #   <script src="/dist/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
   def javascript_pack_tag(name, **options)
     javascript_include_tag(Webpacker::Source.new(name).path, **options)
   end

lib/webpacker/railtie.rb

@@ -9,7 +9,7 @@ class Webpacker::Engine < ::Rails::Engine
       ActionController::Base.helper Webpacker::Helper
     end
 
-    app.config.x.webpacker[:packs_dist_dir] ||= 'packs'
+    app.config.x.webpacker[:packs_dist_dir] ||= 'dist'
     app.config.x.webpacker[:packs_dist_path] ||= \
       "/#{app.config.x.webpacker[:packs_dist_dir]}"
 

lib/webpacker/source.rb

@@ -3,8 +3,8 @@
 # is by default in the production environment (as set via
 # `Rails.configuration.x.webpacker[:digesting] = true`).
 class Webpacker::Source
-  def initialize(name)
-    @name = name
+  def initialize(name, pack: true)
+    @name = pack ? "packs/#{name}" : name
   end
 
   def path