shakapacker 6.1.1 → 6.3.0.pre.rc.1

data/docs/v6_upgrade.md

@@ -2,6 +2,8 @@
 
 There are several substantial changes in Shakapacker v6 that you need to manually account for when coming from Webpacker 5. This guide will help you through it.
 
+[ShakaCode](https://www.shakacode.com) offers support for upgrading from webpacker or using Shakapacker. If interested, contact [justin@shakacode.com](mailto:justin@shakacode.com).
+
 ## Webpacker/Shakapacker has become a slimmer wrapper around Webpack
 
 By default, Webpacker 6 is focused on compiling and bundling JavaScript. This pairs with the existing asset pipeline in Rails that's setup to transpile CSS and static images using [Sprockets](https://github.com/rails/sprockets). For most developers, that's the recommended combination. But if you'd like to use Webpacker for CSS and static assets as well, please see [integrations](https://github.com/shakacode/shakapacker#integrations) for more information.
@@ -10,16 +12,16 @@ Webpacker used to configure Webpack indirectly, which lead to a [complicated sec
 
 While you have to configure integration with frameworks yourself, [`webpack-merge`](https://github.com/survivejs/webpack-merge) helps with this. See this example for [Vue](https://github.com/shakacode/shakapacker#other-frameworks) and scroll to the bottom for [more examples](#examples-of-v5-to-v6).
 
-## webpacker v6.0.0.rc.6 to shakapacker v6.0.0 
+## webpacker v6.0.0.rc.6 to shakapacker v6.0.0
 See an example migration here: [PR 27](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/27).
-          
+
 ### Update Steps to v6.0.0 from v6.0.0.rc.6
 _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
 
 1. Change the gem name from `webpacker` to `shakapacker` and the NPM package from `@rails/webpacker` to `shakapacker`.
-1. Install the peer dependencies. Run `yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server`
+1. Install the peer dependencies. Run `yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server`. You may have old versions of libraries. Run `yarn install` and check for warnings like `warning " > shakapacker@6.1.1" has incorrect peer dependency "compression-webpack-plugin@^9.0.0"` and `file-loader@1.1.11" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0"`. In other words, warnings like these are **serious** and will cause considerable confusion if not respected.
 1. Update any scripts that called `bin/webpack` or `bin/webpack-dev-server` to `bin/webpacker` or `bin/webpacker-dev-server`
-1. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. If you want to use the prior style of having a separate file for each NODE_ENV, you can use this shim for `config/webpack/webpack.config.js`:
+1. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. If you want to use the prior style of having a separate file for each NODE_ENV, you can use this shim for `config/webpack/webpack.config.js`. WARNING, previously, if you did not set `NODE_ENV`, `NODE_ENV` defaulted to `development`. Thus, you might expect `config/webpack/development.js` to run, but you'll instead be using the `config/webpack/RAILS_ENV.js`
    ```js
    const { env, webpackConfig } = require('shakapacker')
    const { existsSync } = require('fs')
@@ -30,11 +32,12 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
      if (existsSync(path)) {
        console.log(`Loading ENV specific webpack configuration file ${path}`)
        return require(path)
-     } else {
-       return webpackConfig
+     } else {                       
+       // Probably an error if the file for the NODE_ENV does not exist
+       throw new Error(`Got Error with NODE_ENV = ${env.nodeEnv}`);
      }
    }
-  
+
    module.exports = envSpecificConfig()
    ```
 1. Update `babel.config.js` if you need JSX support. See [Customizing Babel Config](./customizing_babel_config.md)
@@ -43,26 +46,26 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
 1. Ensure you have a clean working git branch. You will be overwriting all your files and reverting the changes that you don't want.
 
 1. Consider changing from the v5 default for `source_entry_path` in `webpacker.yml`.
-  ```yml
-    source_path: app/javascript
-    source_entry_path: packs
-  ```
-  consider changing to the v6 default:
-  ```yml
-    source_path: app/javascript
-    source_entry_path: /
-  ```
-  Then consider moving your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and updating the configuration file.
-
-  Note, moving your files is optional, as you can stil keep your entries in a separate directory, called something like `packs`, or `entries`. This directory is defined within the source_path.
+   ```yml
+     source_path: app/javascript
+     source_entry_path: packs
+   ```
+   consider changing to the v6 default:
+   ```yml
+     source_path: app/javascript
+     source_entry_path: /
+   ```
+   Then consider moving your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and updating the configuration file.
+
+   Note, moving your files is optional, as you can stil keep your entries in a separate directory, called something like `packs`, or `entries`. This directory is defined within the source_path.
 
 1. **Ensure no nested directories in your `source_entry_path`.** Check if you had any entry point files in child directories of your `source_entry_path`. Files for entry points in child directories are not supported by shakacode/shakapacker v6. Move those files to the top level, adjusting any imports in those files.
 
-  The new v6 configuration does not allow nesting, so as to allow placing the entry points at in the root directory of JavaScript. You can find this change [here](https://github.com/rails/webpacker/commit/5de0fbc1e16d3db0c93202fb39f5b4d80582c682#diff-7af8667a3e36201db57c02b68dd8651883d7bfc00dc9653661be11cd31feeccdL19).
+   The new v6 configuration does not allow nesting, so as to allow placing the entry points at in the root directory of JavaScript. You can find this change [here](https://github.com/rails/webpacker/commit/5de0fbc1e16d3db0c93202fb39f5b4d80582c682#diff-7af8667a3e36201db57c02b68dd8651883d7bfc00dc9653661be11cd31feeccdL19).
 
 1. Upgrade the Webpacker Ruby gem and the NPM package
 
-   Note: [Check the gem page to verify the latest version](https://rubygems.org/gems/shakapacker), and make sure to install identical version numbers of `shakapacker` gem and package. (Gems use a period and packages use a dot between the main version number and the beta version.)
+   Note: [Check the gem page to verify the latest version](https://rubygems.org/gems/shakapacker), and make sure to install identical version numbers of `shakapacker` gem and package. (Gems use a hyphen and packages use a dot between the main version number and the beta version.)
 
    Example going to a specific version:
 
@@ -79,35 +82,15 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
    yarn add shakapacker@6.0.0-rc.13 --exact
    ```
 
-  ```bash
-  bundle exec rails webpacker:install
-  ```
-
-  Overwrite all files and check what changed.
+   ```bash
+   bundle exec rails webpacker:install
+   ```
 
-  Note, the webpacker:install will install the peer dependencies:
-  ```bash
-  yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
-  ```
+   Overwrite all files and check what changed.
 
-1. There is now a single default configuration file of `config/webpack/webpack.config.js`. Previously, the config file was set
-  to `config/webpack/#{NODE_ENV}.js`. In the `config/webpack/` directory, you can either refactor your code in `test.js`, `development.js`, and `production.js` to a single file, `webpack.config.js` or you can replace the contents of `config/webpack/config.webpack.js` to conditionally load the old file based on the NODE_ENV with this snippet:
-   ```js
-   const { env, webpackConfig } = require('shakapacker')
-   const { existsSync } = require('fs')
-   const { resolve } = require('path')
-
-   const envSpecificConfig = () => {
-     const path = resolve(__dirname, `${env.nodeEnv}.js`)
-     if (existsSync(path)) {
-       console.log(`Loading ENV specific webpack configuration file ${path}`)
-       return require(path)
-     } else {
-       return webpackConfig
-     }
-   }
-
-   module.exports = envSpecificConfig()
+   Note, the webpacker:install will install the peer dependencies:
+   ```bash
+   yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
    ```
 
 1. Review the new default's changes to `webpacker.yml`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
@@ -135,51 +118,66 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
 
 1. If you are using any integrations like `css`, `postcss`, `React` or `TypeScript`. Please see https://github.com/shakacode/shakapacker#integrations section on how they work in v6.
 
-1. Import `environment` changed to `webpackConfig`. For example, the new code looks like:
+1. `config/webpack/environment.js` was changed to `config/webpack/base.js` and exports a native webpack config so no need to call `toWebpackConfig`.
+   Use `merge` to make changes:
+   
    ```js
-   // config/webpack/webpack.config.js
-   const { webpackConfig, merge } = require('shakapacker')
-   const customConfig = require('./custom')
-
-   module.exports = merge(webpackConfig, customConfig)
+   // config/webpack/base.js
+   const { webpackConfig, merge } = require('@rails/webpacker');
+   const customConfig = {
+     module: {
+       rules: [
+         {
+           test: require.resolve('jquery'),
+           loader: 'expose-loader',
+           options: {
+             exposes: ['$', 'jQuery']
+           }
+         }
+       ]
+     }
+   };
+   
+   module.exports = merge(webpackConfig, customConfig);
    ```
-
+ 
 1. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
 
 1. Remove `babel.config.js` if you never changed it. Configure your `package.json` to use the default:
-  ```json
-  "babel": {
-    "presets": [
-      "./node_modules/shakapacker/package/babel/preset.js"
-    ]
-  }
-  ```
-  See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md) for React configuration.
+   ```json
+   "babel": {
+     "presets": [
+       "./node_modules/@rails/webpacker/package/babel/preset.js"
+     ]
+   }
+   ```
+   See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md) for React configuration.
 
 1. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/shakacode/shakapacker/blob/master/README.md#webpack-configuration)
 
-    ```js
-    {
-      resolve: {
-        extensions: ['.ts', '.tsx', '.vue', '.css']
-      }
-    }
-    ```
-1. In `webpacker.yml`, check if you had `watched_paths`. That is not `additional_paths`.
+   ```js
+   {
+     resolve: {
+       extensions: ['.ts', '.tsx', '.vue', '.css']
+     }
+   }
+   ```
+1. In `webpacker.yml`, check if you had `watched_paths`. That is now `additional_paths`.
 
 1. Some dependencies were removed in [PR 3056](https://github.com/rails/webpacker/pull/3056). If you see the error: `Error: Cannot find module 'babel-plugin-macros'`, or similar, then you need to `yarn add <dependency>` where <dependency> might include: `babel-plugin-macros`, `case-sensitive-paths-webpack-plugin`, `core-js`, `regenerator-runtime`. Or you might want to remove your dependency on those.
 
 1. Review the new default's changes to `webpacker.yml` and `config/webpack`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
 
-1. Make sure that you can run `bin/webpacker` without errors.
+1. Make sure that you can run `bin/webpack` without errors.
 
 1. Try running `RAILS_ENV=production bin/rails assets:precompile`. If all goes well, don't forget to clean the generated assets with `bin/rails assets:clobber`.
 
 1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.
 
-1. Update any scripts that called `/bin/webpack` or `bin/webpack-dev-server` to `/bin/webpacker` or `bin/webpacker-dev-server`
+1. In `bin/webpack` and `bin/webpack-dev-server`, The default NODE_ENV, if not set, will be the RAILS_ENV. Previously, NODE_ENV would default to development if not set. Thus, the old bin stubs would use the webpack config corresponding to `config/webpack/development.js`. After the change, if `RAILS_ENV` is `test`, then `NODE_ENV` is `test`. The final 6.0 release changes to using a single `webpack.config.js`.
+
+1. Now, follow the steps above to get to shakapacker v6 from webpacker v6.0.0.rc.6
 
-1. Now, follow the steps above to get to shakapacker v6 from webpacker v6.0.0.rc.6[
 
 ## Examples of v5 to v6
 

data/lib/install/config/webpacker.yml

@@ -7,6 +7,11 @@ default: &default
   public_output_path: packs
   cache_path: tmp/webpacker
   webpack_compile_output: true
+  # See https://github.com/shakacode/shakapacker#deployment
+  webpacker_precompile: true
+
+  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+  # manifest_path: public/packs/manifest.json
 
   # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -18,6 +23,9 @@ default: &default
   # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
   webpack_loader: 'babel'
 
+  # Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
+  ensure_consistent_versioning: false
+
 development:
   <<: *default
   compile: true
@@ -29,6 +37,14 @@ development:
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
+    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
+    # that you add style-loader to your project dependencies.
+    #
+    # If you want to instead deliver CSS via <link> with the mini-extract-css-plugin, set inline_css to false.
+    # In that case, style-loader is not needed as a dependency.
+    #
+    # mini-extract-css-plugin is a required dependency in both cases.
+    inline_css: true
     # Defaults to the inverse of hmr. Uncomment to manually set this.
     # live_reload: true
     client:

data/lib/install/template.rb

@@ -58,10 +58,10 @@ results = []
 Dir.chdir(Rails.root) do
   if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
     say "Installing shakapacker@#{Webpacker::VERSION}"
-    results << run("yarn add shakapacker@#{Webpacker::VERSION}")
+    results << run("yarn add shakapacker@#{Webpacker::VERSION} --exact")
   else
     say "Installing shakapacker@next"
-    results << run("yarn add shakapacker@next")
+    results << run("yarn add shakapacker@next --exact")
   end
 
   package_json = File.read("#{__dir__}/../../package.json")

data/lib/tasks/webpacker/clean.rake

@@ -11,9 +11,7 @@ namespace :webpacker do
   end
 end
 
-skip_webpacker_clean = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
-
-unless skip_webpacker_clean
+if Webpacker.config.webpacker_precompile?
   # Run clean if the assets:clean is run
   if Rake::Task.task_defined?("assets:clean")
     Rake::Task["assets:clean"].enhance do

data/lib/tasks/webpacker/clobber.rake

@@ -8,9 +8,7 @@ namespace :webpacker do
   end
 end
 
-skip_webpacker_clobber = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
-
-unless skip_webpacker_clobber
+if Webpacker.config.webpacker_precompile?
   # Run clobber if the assets:clobber is run
   if Rake::Task.task_defined?("assets:clobber")
     Rake::Task["assets:clobber"].enhance do

data/lib/tasks/webpacker/compile.rake

@@ -33,10 +33,7 @@ namespace :webpacker do
   end
 end
 
-# Compile packs after we've compiled all other assets during precompilation
-skip_webpacker_precompile = %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
-
-unless skip_webpacker_precompile
+if Webpacker.config.webpacker_precompile?
   if Rake::Task.task_defined?("assets:precompile")
     enhance_assets_precompile
   else

data/lib/webpacker/commands.rb

@@ -16,7 +16,7 @@ class Webpacker::Commands
   #   age=600.
   #
   def clean(count = 2, age = 3600)
-    if config.public_output_path.exist? && config.public_manifest_path.exist?
+    if config.public_output_path.exist? && config.manifest_path.exist?
       packs
         .map do |paths|
           paths.map { |path| [Time.now - File.mtime(path), path] }
@@ -57,7 +57,7 @@ class Webpacker::Commands
   private
     def packs
       all_files       = Dir.glob("#{config.public_output_path}/**/*")
-      manifest_config = Dir.glob("#{config.public_manifest_path}*")
+      manifest_config = Dir.glob("#{config.manifest_path}*")
 
       packs = all_files - manifest_config - current_version
       packs.reject { |file| File.directory?(file) }.group_by do |path|

data/lib/webpacker/compiler.rb

@@ -1,5 +1,4 @@
 require "open3"
-require "digest/sha1"
 
 class Webpacker::Compiler
   # Additional paths that test compiler needs to watch
@@ -20,25 +19,19 @@ class Webpacker::Compiler
 
   def compile
     if stale?
-      run_webpack.tap do |success|
-        # We used to only record the digest on success
-        # However, the output file is still written on error, meaning that the digest should still be updated.
-        # If it's not, you can end up in a situation where a recompile doesn't take place when it should.
-        # See https://github.com/rails/webpacker/issues/2113
-        record_compilation_digest
-      end
+      run_webpack
     else
       logger.debug "Everything's up-to-date. Nothing to do"
       true
     end
   end
 
-  # Returns true if all the compiled packs are up to date with the underlying asset files.
+  # Returns true if manifest file mtime is newer than the timestamp of the last modified watched file
   def fresh?
-    last_compilation_digest&.== watched_files_digest
+    manifest_mtime > latest_modified_timestamp
   end
 
-  # Returns true if the compiled packs are out of date with the underlying asset files.
+  # Returns true if manifest file mtime is older than the timestamp of the last modified watched file
   def stale?
     !fresh?
   end
@@ -46,12 +39,11 @@ class Webpacker::Compiler
   private
     attr_reader :webpacker
 
-    def last_compilation_digest
-      compilation_digest_path.read if compilation_digest_path.exist? && config.public_manifest_path.exist?
-    rescue Errno::ENOENT, Errno::ENOTDIR
+    def manifest_mtime
+      config.manifest_path.exist? ? File.mtime(config.manifest_path).to_i : 0
     end
 
-    def watched_files_digest
+    def latest_modified_timestamp
       if Rails.env.development?
         warn <<~MSG.strip
           Webpacker::Compiler - Slow setup for development
@@ -67,14 +59,8 @@ class Webpacker::Compiler
       expanded_paths = [*default_watched_paths, *watched_paths].map do |path|
         root_path.join(path)
       end
-      files = Dir[*expanded_paths].reject { |f| File.directory?(f) }
-      file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
-      Digest::SHA1.hexdigest(file_ids.join("/"))
-    end
-
-    def record_compilation_digest
-      config.cache_path.mkpath
-      compilation_digest_path.write(watched_files_digest)
+      latest_modified = Dir[*expanded_paths].max_by { |f| File.mtime(f) }
+      File.mtime(latest_modified).to_i
     end
 
     def optionalRubyRunner
@@ -109,17 +95,13 @@ class Webpacker::Compiler
 
     def default_watched_paths
       [
-        *config.additional_paths,
-        "#{config.source_path}/**/*",
+        *config.additional_paths.map { |path| "#{path}{,/**/*}" },
+        "#{config.source_path}{,/**/*}",
         "yarn.lock", "package.json",
-        "config/webpack/**/*"
+        "config/webpack{,/**/*}"
       ].freeze
     end
 
-    def compilation_digest_path
-      config.cache_path.join("last-compilation-digest-#{webpacker.env}")
-    end
-
     def webpack_env
       return env unless defined?(ActionController::Base)
 

data/lib/webpacker/configuration.rb

@@ -23,6 +23,16 @@ class Webpacker::Configuration
     fetch(:compile)
   end
 
+  def ensure_consistent_versioning?
+    fetch(:ensure_consistent_versioning)
+  end
+
+  def webpacker_precompile?
+    # ENV of false takes precedence
+    return false if %w(no false n f).include?(ENV["WEBPACKER_PRECOMPILE"])
+    return %w(yes true t).include?(ENV["WEBPACKER_PRECOMPILE"]) || fetch(:webpacker_precompile)
+  end
+
   def source_path
     root_path.join(fetch(:source_path))
   end
@@ -35,6 +45,18 @@ class Webpacker::Configuration
     source_path.join(fetch(:source_entry_path))
   end
 
+  def manifest_path
+    if data.has_key?(:manifest_path)
+      root_path.join(fetch(:manifest_path))
+    else
+      public_output_path.join("manifest.json")
+    end
+  end
+
+  def public_manifest_path
+    manifest_path
+  end
+
   def public_path
     root_path.join(fetch(:public_root_path))
   end
@@ -43,10 +65,6 @@ class Webpacker::Configuration
     public_path.join(fetch(:public_output_path))
   end
 
-  def public_manifest_path
-    public_output_path.join("manifest.json")
-  end
-
   def cache_manifest?
     fetch(:cache_manifest)
   end

data/lib/webpacker/dev_server.rb

@@ -1,9 +1,9 @@
 class Webpacker::DevServer
   DEFAULT_ENV_PREFIX = "WEBPACKER_DEV_SERVER".freeze
 
-  # Configure dev server connection timeout (in seconds), default: 0.01
+  # Configure dev server connection timeout (in seconds), default: 0.1
   # Webpacker.dev_server.connect_timeout = 1
-  cattr_accessor(:connect_timeout) { 0.01 }
+  cattr_accessor(:connect_timeout) { 0.1 }
 
   attr_reader :config
 
@@ -55,6 +55,15 @@ class Webpacker::DevServer
     fetch(:hmr)
   end
 
+  def inline_css?
+    case fetch(:inline_css)
+    when false, "false"
+      false
+    else
+      true
+    end
+  end
+
   def env_prefix
     config.dev_server.fetch(:env_prefix, DEFAULT_ENV_PREFIX)
   end

data/lib/webpacker/helper.rb

@@ -101,9 +101,17 @@ module Webpacker::Helper
       "Please refer to https://github.com/shakacode/shakapacker/blob/master/README.md#usage for the usage guide"
     end
 
+    append_javascript_pack_tag(*names, defer: defer)
+    non_deferred = sources_from_manifest_entrypoints(javascript_pack_tag_queue[:non_deferred], type: :javascript)
+    deferred = sources_from_manifest_entrypoints(javascript_pack_tag_queue[:deferred], type: :javascript) - non_deferred
+
     @javascript_pack_tag_loaded = true
 
-    javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options.tap { |o| o[:defer] = defer })
+    capture do
+      concat javascript_include_tag(*deferred, **options.tap { |o| o[:defer] = true })
+      concat "\n" if non_deferred.any? && deferred.any?
+      concat javascript_include_tag(*non_deferred, **options.tap { |o| o[:defer] = false })
+    end
   end
 
   # Creates a link tag, for preloading, that references a given Webpacker asset.
@@ -148,20 +156,30 @@ module Webpacker::Helper
   #   <%= stylesheet_pack_tag 'calendar' %>
   #   <%= stylesheet_pack_tag 'map' %>
   def stylesheet_pack_tag(*names, **options)
-    if @stylesheet_pack_tag_loaded
-      raise "To prevent duplicated chunks on the page, you should call stylesheet_pack_tag only once on the page. " \
-      "Please refer to https://github.com/shakacode/shakapacker/blob/master/README.md#usage for the usage guide"
-    end
-
-    @stylesheet_pack_tag_loaded = true
-
     return "" if Webpacker.inlining_css?
 
     stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
+  def append_javascript_pack_tag(*names, defer: true)
+    if @javascript_pack_tag_loaded
+      raise "You can only call append_javascript_pack_tag before javascript_pack_tag helper. " \
+      "Please refer to https://github.com/shakacode/shakapacker/blob/master/README.md#usage for the usage guide"
+    end
+
+    hash_key = defer ? :deferred : :non_deferred
+    javascript_pack_tag_queue[hash_key] |= names
+  end
+
   private
 
+    def javascript_pack_tag_queue
+      @javascript_pack_tag_queue ||= {
+        deferred: [],
+        non_deferred: []
+      }
+    end
+
     def sources_from_manifest_entrypoints(names, type:)
       names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name.to_s, type: type) }.flatten.uniq
     end

data/lib/webpacker/instance.rb

@@ -36,6 +36,6 @@ class Webpacker::Instance
   end
 
   def inlining_css?
-    dev_server.hmr? && dev_server.running?
+    dev_server.inline_css? && dev_server.hmr? && dev_server.running?
   end
 end

data/lib/webpacker/manifest.rb

@@ -80,8 +80,8 @@ class Webpacker::Manifest
     end
 
     def load
-      if config.public_manifest_path.exist?
-        JSON.parse config.public_manifest_path.read
+      if config.manifest_path.exist?
+        JSON.parse config.manifest_path.read
       else
         {}
       end
@@ -104,12 +104,12 @@ class Webpacker::Manifest
 
     def missing_file_from_manifest_error(bundle_name)
       <<-MSG
-Webpacker can't find #{bundle_name} in #{config.public_manifest_path}. Possible causes:
+Shakapacker can't find #{bundle_name} in #{config.manifest_path}. Possible causes:
 1. You forgot to install node packages (try `yarn install`) or are running an incompatible version of Node
 2. Your app has code with a non-standard extension (like a `.jsx` file) but the extension is not in the `extensions` config in `config/webpacker.yml`
 3. You have set compile: false (see `config/webpacker.yml`) for this environment
    (unless you are using the `bin/webpacker -w` or the `bin/webpacker-dev-server`, in which case maybe you aren't running the dev server in the background?)
-4. webpack has not yet re-run to reflect updates.
+4. webpack has not yet FINISHED running to reflect updates.
 5. You have misconfigured Webpacker's `config/webpacker.yml` file.
 6. Your webpack configuration is not creating a manifest.
 

data/lib/webpacker/railtie.rb

@@ -2,11 +2,18 @@ require "rails/railtie"
 
 require "webpacker/helper"
 require "webpacker/dev_server_proxy"
+require "webpacker/version_checker"
 
 class Webpacker::Engine < ::Rails::Engine
   # Allows Webpacker config values to be set via Rails env config files
   config.webpacker = ActiveSupport::OrderedOptions.new
 
+  initializer "webpacker.version_checker" do
+    if File.exist?(Webpacker::VersionChecker::NodePackageVersion.package_json_path)
+      Webpacker::VersionChecker.build.raise_if_gem_and_node_package_versions_differ
+    end
+  end
+
   initializer "webpacker.proxy" do |app|
     if (Webpacker.config.dev_server.present? rescue nil)
       app.middleware.insert_before 0,

data/lib/webpacker/version.rb

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