webpacker 6.0.0.beta.7 → 6.0.0.rc.6

data/lib/tasks/yarn.rake

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# Duplicate of the yarn tasks still present in Rails until Webpacker <5 have been deprecated
+
+namespace :yarn do
+  desc "Install all JavaScript dependencies as specified via Yarn"
+  task :install do
+    begin
+      # Install only production deps when for not usual envs.
+      valid_node_envs = %w[test development production]
+      node_env = ENV.fetch("NODE_ENV") do
+        valid_node_envs.include?(Rails.env) ? Rails.env : "production"
+      end
+
+      yarn_flags =
+        if `#{RbConfig.ruby} "#{Rails.root}/bin/yarn" --version`.start_with?("1")
+          "--no-progress --frozen-lockfile"
+        else
+          "--immutable"
+        end
+
+      system(
+        { "NODE_ENV" => node_env },
+        "#{RbConfig.ruby} \"#{Rails.root}/bin/yarn\" install #{yarn_flags}",
+        exception: true
+      )
+    rescue Errno::ENOENT
+      $stderr.puts "bin/yarn was not found."
+      $stderr.puts "Please run `bundle exec rails app:update:bin` to create it."
+      exit 1
+    end
+  end
+end
+
+# Run Yarn prior to Sprockets assets precompilation, so dependencies are available for use.
+if Rake::Task.task_defined?("assets:precompile") && File.exist?(Rails.root.join("bin", "yarn"))
+  Rake::Task["assets:precompile"].enhance [ "yarn:install" ]
+end

data/lib/webpacker/commands.rb

@@ -17,20 +17,21 @@ class Webpacker::Commands
   #
   def clean(count = 2, age = 3600)
     if config.public_output_path.exist? && config.public_manifest_path.exist?
-      versions
-        .sort
-        .reverse
-        .each_with_index
-        .drop_while do |(mtime, _), index|
-          max_age = [0, Time.now - Time.at(mtime)].max
-          max_age < age || index < count
+      packs
+        .map do |paths|
+          paths.map { |path| [Time.now - File.mtime(path), path] }
+          .sort
+          .reject.with_index do |(file_age, _), index|
+            file_age < age || index < count
+          end
+          .map { |_, path| path }
         end
-        .each do |(_, files), index|
-          files.each do |file|
-            if File.file?(file)
-              File.delete(file)
-              logger.info "Removed #{file}"
-            end
+        .flatten
+        .compact
+        .each do |file|
+          if File.file?(file)
+            File.delete(file)
+            logger.info "Removed #{file}"
           end
         end
     end
@@ -54,12 +55,15 @@ class Webpacker::Commands
   end
 
   private
-    def versions
+    def packs
       all_files       = Dir.glob("#{config.public_output_path}/**/*")
       manifest_config = Dir.glob("#{config.public_manifest_path}*")
 
       packs = all_files - manifest_config - current_version
-      packs.reject { |file| File.directory?(file) }.group_by { |file| File.mtime(file).utc.to_i }
+      packs.reject { |file| File.directory?(file) }.group_by do |path|
+        base, _, ext = File.basename(path).scan(/(.*)(-[\da-f]+)(\.\w+)/).flatten
+        "#{File.dirname(path)}/#{base}#{ext}"
+      end.values
     end
 
     def current_version

data/lib/webpacker/configuration.rb

@@ -73,8 +73,12 @@ class Webpacker::Configuration
     end
 
     def load
-      YAML.load(config_path.read)[env].deep_symbolize_keys
-
+      config = begin
+        YAML.load_file(config_path.to_s, aliases: true)
+      rescue ArgumentError
+        YAML.load_file(config_path.to_s)
+      end
+      config[env].deep_symbolize_keys
     rescue Errno::ENOENT => e
       raise "Webpacker configuration file not found #{config_path}. " \
             "Please run rails webpacker:install " \
@@ -87,7 +91,14 @@ class Webpacker::Configuration
     end
 
     def defaults
-      @defaults ||= \
-        HashWithIndifferentAccess.new(YAML.load_file(File.expand_path("../../install/config/webpacker.yml", __FILE__))[env])
+      @defaults ||= begin
+        path = File.expand_path("../../install/config/webpacker.yml", __FILE__)
+        config = begin
+          YAML.load_file(path, aliases: true)
+        rescue ArgumentError
+          YAML.load_file(path)
+        end
+        HashWithIndifferentAccess.new(config[env])
+      end
     end
 end

data/lib/webpacker/dev_server.rb

@@ -51,12 +51,18 @@ class Webpacker::DevServer
     fetch(:pretty)
   end
 
+  def hmr?
+    fetch(:hmr)
+  end
+
   def env_prefix
     config.dev_server.fetch(:env_prefix, DEFAULT_ENV_PREFIX)
   end
 
   private
     def fetch(key)
+      return nil unless config.dev_server.present?
+
       ENV["#{env_prefix}_#{key.upcase}"] || config.dev_server.fetch(key, defaults[key])
     end
 

data/lib/webpacker/dev_server_runner.rb

@@ -20,7 +20,7 @@ module Webpacker
 
         @config = Configuration.new(
           root_path: app_root,
-          config_path: app_root.join("config/webpacker.yml"),
+          config_path: Pathname.new(@webpacker_config),
           env: ENV["RAILS_ENV"]
         )
 
@@ -30,6 +30,7 @@ module Webpacker
         @port              = dev_server.port
         @pretty            = dev_server.pretty?
         @https             = dev_server.https?
+        @hot               = dev_server.hmr?
 
       rescue Errno::ENOENT, NoMethodError
         $stdout.puts "webpack dev_server configuration not found in #{@config.config_path}[#{ENV["RAILS_ENV"]}]."
@@ -64,7 +65,7 @@ module Webpacker
       def execute_cmd
         env = Webpacker::Compiler.env
         env["WEBPACKER_CONFIG"] = @webpacker_config
-        env["WEBPACK_DEV_SERVER"] = "true"
+        env["WEBPACK_SERVE"] = "true"
 
         cmd = if node_modules_bin_exist?
           ["#{@node_modules_bin_path}/webpack", "serve"]
@@ -73,12 +74,14 @@ module Webpacker
         end
 
         if @argv.include?("--debug-webpacker")
-          cmd = [ "node", "--inspect-brk"] + cmd
+          cmd = [ "node", "--inspect-brk", "--trace-warnings" ] + cmd
           @argv.delete "--debug-webpacker"
         end
 
         cmd += ["--config", @webpack_config]
         cmd += ["--progress", "--color"] if @pretty
+
+        cmd += ["--hot"] if @hot
         cmd += @argv
 
         Dir.chdir(@app_path) do

data/lib/webpacker/env.rb

@@ -27,7 +27,11 @@ class Webpacker::Env
 
     def available_environments
       if config_path.exist?
-        YAML.load(config_path.read).keys
+        begin
+          YAML.load_file(config_path.to_s, aliases: true)
+        rescue ArgumentError
+          YAML.load_file(config_path.to_s)
+        end
       else
         [].freeze
       end

data/lib/webpacker/helper.rb

@@ -81,11 +81,11 @@ module Webpacker::Helper
   # Example:
   #
   #   <%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
-  #   <script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
-  #   <script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
-  #   <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
-  #   <script src="/packs/map~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
-  #   <script src="/packs/map-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
+  #   <script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload" defer="true"></script>
+  #   <script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload" defer="true"></script>
+  #   <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload" defer="true"></script>
+  #   <script src="/packs/map~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload" defer="true"></script>
+  #   <script src="/packs/map-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload" defer="true"></script>
   #
   # DO:
   #
@@ -95,8 +95,8 @@ module Webpacker::Helper
   #
   #   <%= javascript_pack_tag 'calendar' %>
   #   <%= javascript_pack_tag 'map' %>
-  def javascript_pack_tag(*names, **options)
-    javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
+  def javascript_pack_tag(*names, defer: true, **options)
+    javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options.tap { |o| o[:defer] = defer })
   end
 
   # Creates a link tag, for preloading, that references a given Webpacker asset.
@@ -128,6 +128,10 @@ module Webpacker::Helper
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />
   #
+  #   When using the webpack-dev-server, CSS is inlined so HMR can be turned on for CSS,
+  #   including CSS modules
+  #   <%= stylesheet_pack_tag 'calendar', 'map' %> # => nil
+  #
   # DO:
   #
   #   <%= stylesheet_pack_tag 'calendar', 'map' %>
@@ -137,6 +141,8 @@ module Webpacker::Helper
   #   <%= stylesheet_pack_tag 'calendar' %>
   #   <%= stylesheet_pack_tag 'map' %>
   def stylesheet_pack_tag(*names, **options)
+    return "" if Webpacker.inlining_css?
+
     stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
@@ -147,7 +153,7 @@ module Webpacker::Helper
     end
 
     def resolve_path_to_image(name, **options)
-      path = name.starts_with?("media/images/") ? name : "media/images/#{name}"
+      path = name.starts_with?("static/") ? name : "static/#{name}"
       path_to_asset(current_webpacker_instance.manifest.lookup!(path), options)
     rescue
       path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)

data/lib/webpacker/instance.rb

@@ -34,4 +34,8 @@ class Webpacker::Instance
   def commands
     @commands ||= Webpacker::Commands.new self
   end
+
+  def inlining_css?
+    dev_server.hmr? && dev_server.running?
+  end
 end

data/lib/webpacker/manifest.rb

@@ -91,8 +91,7 @@ class Webpacker::Manifest
     # manifest hash the entrypoints are defined by their pack name without the extension.
     # When the user provides a name with a file extension, we want to try to strip it off.
     def manifest_name(name, pack_type)
-      return name if File.extname(name.to_s).empty?
-      File.basename(name, ".#{pack_type}")
+      name.chomp(".#{pack_type}")
     end
 
     def manifest_type(pack_type)

data/lib/webpacker/railtie.rb

@@ -8,8 +8,7 @@ class Webpacker::Engine < ::Rails::Engine
   config.webpacker = ActiveSupport::OrderedOptions.new
 
   initializer "webpacker.proxy" do |app|
-    insert_middleware = Webpacker.config.dev_server.present? rescue nil
-    if insert_middleware
+    if (Webpacker.config.dev_server.present? rescue nil)
       app.middleware.insert_before 0,
         Rails::VERSION::MAJOR >= 5 ?
           Webpacker::DevServerProxy : "Webpacker::DevServerProxy", ssl_verify_none: true
@@ -52,4 +51,11 @@ class Webpacker::Engine < ::Rails::Engine
       app.config.javascript_path = Webpacker.config.source_path.relative_path_from(Rails.root.join("app")).to_s
     end
   end
+
+  initializer "webpacker.remove_app_packs_from_the_autoload_paths" do
+    Rails.application.config.before_initialize do
+      source_path = Webpacker.config.source_path.to_s
+      ActiveSupport::Dependencies.autoload_paths.delete(source_path)
+    end
+  end
 end

data/lib/webpacker/runner.rb

@@ -12,7 +12,7 @@ module Webpacker
       @app_path              = File.expand_path(".", Dir.pwd)
       @node_modules_bin_path = ENV["WEBPACKER_NODE_MODULES_BIN_PATH"] || `yarn bin`.chomp
       @webpack_config        = File.join(@app_path, "config/webpack/#{ENV["NODE_ENV"]}.js")
-      @webpacker_config      = File.join(@app_path, "config/webpacker.yml")
+      @webpacker_config      = ENV["WEBPACKER_CONFIG"] || File.join(@app_path, "config/webpacker.yml")
 
       unless File.exist?(@webpack_config)
         $stderr.puts "webpack config #{@webpack_config} not found, please run 'bundle exec rails webpacker:install' to install Webpacker with default configs or add the missing config file for your custom environment."

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "6.0.0.beta.7".freeze
+  VERSION = "6.0.0.rc.6".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -3,6 +3,19 @@ require "webpacker/runner"
 
 module Webpacker
   class WebpackRunner < Webpacker::Runner
+    WEBPACK_COMMANDS = [
+      "help",
+      "h",
+      "--help",
+      "-h",
+      "version",
+      "v",
+      "--version",
+      "-v",
+      "info",
+      "i"
+    ].freeze
+
     def run
       env = Webpacker::Compiler.env
       env["WEBPACKER_CONFIG"] = @webpacker_config
@@ -13,17 +26,24 @@ module Webpacker
         ["yarn", "webpack"]
       end
 
-      if @argv.include?("--debug-webpacker")
-        cmd = [ "node", "--inspect-brk"] + cmd
-        @argv.delete "--debug-webpacker"
+      if @argv.delete "--debug-webpacker"
+        cmd = ["node", "--inspect-brk"] + cmd
+      end
+
+      if @argv.delete "--trace-deprecation"
+        cmd = ["node", "--trace-deprecation"] + cmd
+      end
+
+      if @argv.delete "--no-deprecation"
+        cmd = ["node", "--no-deprecation"] + cmd
       end
 
-      if @argv.include?("--trace-deprecation")
-        cmd = [ "node", "--trace-deprecation"] + cmd
-        @argv.delete "--trace-deprecation"
+      # Webpack commands are not compatible with --config option.
+      if (@argv & WEBPACK_COMMANDS).empty?
+        cmd += ["--config", @webpack_config]
       end
 
-      cmd += ["--config", @webpack_config] + @argv
+      cmd += @argv
 
       Dir.chdir(@app_path) do
         Kernel.exec env, *cmd

data/lib/webpacker.rb

@@ -30,7 +30,7 @@ module Webpacker
     Webpacker.logger = old_logger
   end
 
-  delegate :logger, :logger=, :env, to: :instance
+  delegate :logger, :logger=, :env, :inlining_css?, to: :instance
   delegate :config, :compiler, :manifest, :commands, :dev_server, to: :instance
   delegate :bootstrap, :clean, :clobber, :compile, to: :commands
 end

data/package/__tests__/development.js

@@ -11,27 +11,20 @@ describe('Development environment', () => {
   describe('webpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
-    test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => {
+    test('should use development config and environment including devServer if WEBPACK_SERVE', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
-      process.env.WEBPACK_DEV_SERVER = 'YES'
+      process.env.WEBPACK_SERVE = 'true'
       const { webpackConfig } = require('../index')
 
       expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
       expect(webpackConfig.output.publicPath).toEqual('/packs/')
-      expect(webpackConfig).toMatchObject({
-        devServer: {
-          host: 'localhost',
-          port: 3035,
-          injectClient: true
-        }
-      })
     })
 
-    test('should use development config and environment if WEBPACK_DEV_SERVER', () => {
+    test('should use development config and environment if WEBPACK_SERVE', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
-      process.env.WEBPACK_DEV_SERVER = undefined
+      process.env.WEBPACK_SERVE = undefined
       const { webpackConfig } = require('../index')
 
       expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))

data/package/__tests__/env.js

@@ -15,7 +15,8 @@ describe('Env', () => {
       railsEnv: 'development',
       nodeEnv: 'development',
       isProduction: false,
-      isDevelopment: true
+      isDevelopment: true,
+      runningWebpackDevServer: false
     })
   })
 
@@ -26,7 +27,8 @@ describe('Env', () => {
       railsEnv: 'development',
       nodeEnv: 'production',
       isProduction: true,
-      isDevelopment: false
+      isDevelopment: false,
+      runningWebpackDevServer: false
     })
   })
 
@@ -37,7 +39,8 @@ describe('Env', () => {
       railsEnv: 'production',
       nodeEnv: 'production',
       isProduction: true,
-      isDevelopment: false
+      isDevelopment: false,
+      runningWebpackDevServer: false
     })
   })
 
@@ -48,7 +51,8 @@ describe('Env', () => {
       railsEnv: 'staging',
       nodeEnv: 'production',
       isProduction: true,
-      isDevelopment: false
+      isDevelopment: false,
+      runningWebpackDevServer: false
     })
   })
 })

data/package/babel/preset.js

@@ -42,7 +42,6 @@ module.exports = function config(api) {
       ]
     ].filter(Boolean),
     plugins: [
-      'babel-plugin-macros',
       ['@babel/plugin-proposal-class-properties', { loose: true }],
       ['@babel/plugin-transform-runtime', { helpers: false }],
       isProductionEnv &&

data/package/config.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path')
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 const { merge } = require('webpack-merge')
 const { ensureTrailingSlash } = require('./utils/helpers')
@@ -9,12 +9,12 @@ const configPath = require('./configPath')
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
 
 const getDefaultConfig = () => {
-  const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
+  const defaultConfig = load(readFileSync(defaultConfigPath), 'utf8')
   return defaultConfig[railsEnv] || defaultConfig.production
 }
 
 const defaults = getDefaultConfig()
-const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
+const app = load(readFileSync(configPath), 'utf8')[railsEnv]
 
 const config = merge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)

data/package/env.js

@@ -1,4 +1,4 @@
-const { safeLoad } = require('js-yaml')
+const { load } = require('js-yaml')
 const { readFileSync } = require('fs')
 
 const NODE_ENVIRONMENTS = ['development', 'production', 'test']
@@ -12,13 +12,16 @@ const nodeEnv
 const isProduction = nodeEnv === 'production'
 const isDevelopment = nodeEnv === 'development'
 
-const config = safeLoad(readFileSync(configPath), 'utf8')
+const config = load(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
+const runningWebpackDevServer = process.env.WEBPACK_SERVE === 'true'
+
 module.exports = {
   railsEnv: railsEnv && railsEnv.match(regex) ? railsEnv : DEFAULT,
   nodeEnv,
   isProduction,
-  isDevelopment
+  isDevelopment,
+  runningWebpackDevServer
 }

data/package/environments/__tests__/base.js

@@ -29,9 +29,9 @@ describe('Base config', () => {
     })
 
     test('should return output', () => {
-      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(baseConfig.output.filename).toEqual('js/[name].js')
       expect(baseConfig.output.chunkFilename).toEqual(
-        'js/[name]-[contenthash].chunk.js'
+        'js/[name].chunk.js'
       )
     })
 
@@ -44,7 +44,7 @@ describe('Base config', () => {
     })
 
     test('should return default plugins', () => {
-      expect(baseConfig.plugins.length).toEqual(3)
+      expect(baseConfig.plugins.length).toEqual(2)
     })
 
     test('should return default resolveLoader', () => {

data/package/environments/base.js

@@ -5,10 +5,10 @@ const { basename, dirname, join, relative, resolve } = require('path')
 const extname = require('path-complete-extname')
 const PnpWebpackPlugin = require('pnp-webpack-plugin')
 const { sync: globSync } = require('glob')
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const WebpackAssetsManifest = require('webpack-assets-manifest')
 const webpack = require('webpack')
 const rules = require('../rules')
+const { isProduction } = require('../env')
 const config = require('../config')
 const { moduleExists } = require('../utils/helpers')
 
@@ -16,7 +16,7 @@ const getEntryObject = () => {
   const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
 
-  globSync(`${rootPath}/**/*.*`).forEach((path) => {
+  globSync(`${rootPath}/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)
@@ -52,7 +52,6 @@ const getModulePaths = () => {
 const getPlugins = () => {
   const plugins = [
     new webpack.EnvironmentPlugin(process.env),
-    new CaseSensitivePathsPlugin(),
     new WebpackAssetsManifest({
       entrypoints: true,
       writeToDisk: true,
@@ -63,11 +62,12 @@ const getPlugins = () => {
   ]
 
   if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
+    const hash = isProduction ? '-[contenthash:8]' : ''
     const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     plugins.push(
       new MiniCssExtractPlugin({
-        filename: 'css/[name]-[contenthash:8].css',
-        chunkFilename: 'css/[id]-[contenthash:8].css'
+        filename: `css/[name]${hash}.css`,
+        chunkFilename: `css/[id]${hash}.css`
       })
     )
   }
@@ -75,12 +75,17 @@ const getPlugins = () => {
   return plugins
 }
 
+// Don't use contentHash except for production for performance
+// https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+const hash = isProduction ? '-[contenthash]' : ''
 module.exports = {
   mode: 'production',
   output: {
-    filename: 'js/[name]-[contenthash].js',
-    chunkFilename: 'js/[name]-[contenthash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    filename: `js/[name]${hash}.js`,
+    chunkFilename: `js/[name]${hash}.chunk.js`,
+
+    // https://webpack.js.org/configuration/output/#outputhotupdatechunkfilename
+    hotUpdateChunkFilename: 'js/[id].[fullhash].hot-update.js',
     path: config.outputPath,
     publicPath: config.publicPath
   },