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

data/lib/tasks/webpacker/check_node.rake

@@ -3,7 +3,9 @@ namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
     begin
-      raise Errno::ENOENT if `which node || which nodejs`.strip.empty?
+      which_command = Gem.win_platform? ? "where" : "which"
+      raise Errno::ENOENT if `#{which_command} node || #{which_command} nodejs`.strip.empty?
+
       node_version = `node -v || nodejs -v`.strip
       raise Errno::ENOENT if node_version.blank?
 

data/lib/tasks/webpacker/check_yarn.rake

@@ -3,14 +3,16 @@ namespace :webpacker do
   desc "Verifies if Yarn is installed"
   task :check_yarn do
     begin
-      raise Errno::ENOENT if `which yarn`.strip.empty?
+      which_command = Gem.win_platform? ? "where" : "which"
+      raise Errno::ENOENT if `#{which_command} yarn`.strip.empty?
+
       yarn_version = `yarn --version`.strip
       raise Errno::ENOENT if yarn_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
       yarn_range = JSON.parse(pkg_path.read)["engines"]["yarn"]
       is_valid = SemanticRange.satisfies?(yarn_version, yarn_range) rescue false
-      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=3.0.0") rescue false
+      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=4.0.0") rescue false
 
       unless is_valid
         $stderr.puts "Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"

data/lib/tasks/webpacker/clobber.rake

@@ -2,7 +2,7 @@ require "webpacker/configuration"
 
 namespace :webpacker do
   desc "Remove the webpack compiled output directory"
-  task clobber: ["webpacker:verify_install", :environment] do
+  task clobber: ["webpacker:verify_config", :environment] do
     Webpacker.clobber
     $stdout.puts "Removed webpack output path directory #{Webpacker.config.public_output_path}"
   end

data/lib/tasks/webpacker/verify_config.rake

@@ -0,0 +1,14 @@
+require "webpacker/configuration"
+
+namespace :webpacker do
+  desc "Verifies if the Webpacker config is present"
+  task :verify_config do
+    unless Webpacker.config.config_path.exist?
+      path = Webpacker.config.config_path.relative_path_from(Pathname.new(pwd)).to_s
+      $stderr.puts "Configuration #{path} file not found. \n"\
+           "Make sure webpacker:install is run successfully before " \
+           "running dependent tasks"
+      exit!
+    end
+  end
+end

data/lib/tasks/webpacker/verify_install.rake

@@ -1,14 +1,4 @@
-require "webpacker/configuration"
-
 namespace :webpacker do
   desc "Verifies if Webpacker is installed"
-  task verify_install: [:check_node, :check_yarn, :check_binstubs] do
-    unless Webpacker.config.config_path.exist?
-      path = Webpacker.config.config_path.relative_path_from(Pathname.new(pwd)).to_s
-      $stderr.puts "Configuration #{path} file not found. \n"\
-           "Make sure webpacker:install is run successfully before " \
-           "running dependent tasks"
-      exit!
-    end
-  end
+  task verify_install: [:verify_config, :check_node, :check_yarn, :check_binstubs]
 end

data/lib/tasks/yarn.rake

@@ -0,0 +1,36 @@
+# 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
+    # 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
+
+# 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/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"]}]."
@@ -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

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.2".freeze
 end

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

@@ -14,7 +14,7 @@ describe('Development environment', () => {
     test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
-      process.env.WEBPACK_DEV_SERVER = 'YES'
+      process.env.WEBPACK_DEV_SERVER = 'true'
       const { webpackConfig } = require('../index')
 
       expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
@@ -23,7 +23,7 @@ describe('Development environment', () => {
         devServer: {
           host: 'localhost',
           port: 3035,
-          injectClient: true
+          injectClient: false
         }
       })
     })

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/env.js

@@ -16,9 +16,15 @@ const config = safeLoad(readFileSync(configPath), 'utf8')
 const availableEnvironments = Object.keys(config).join('|')
 const regex = new RegExp(`^(${availableEnvironments})$`, 'g')
 
+// v4 of webpack-dev-server will switch to WEBPACK_DEV_SERVE
+// https://github.com/rails/webpacker/issues/3057
+const runningWebpackDevServer = process.env.WEBPACK_DEV_SERVER === 'true' ||
+  process.env.WEBPACK_DEV_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')
 
@@ -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
   },