webpacker 6.0.0.rc.5 → 6.0.0.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 308f1dcfbba68cb509f38d0990c5fc0bbab2f0d1291869057f4c11eb797cdc61
-  data.tar.gz: 816f1050b3df6a970119fa967e4ff9db2562dd240674d46eba91c0d6ae5aefa7
+  metadata.gz: bb700e8975b2ec865da84e152fea23586c8e7a2a428465230255ab97ebe482ce
+  data.tar.gz: c2a023d554364442cd356771cad8b42226a3d6ce3a4708b6a5603151aad886ba
 SHA512:
-  metadata.gz: 4e3051f31353cd4f6ec9c0c7642ce00ab5b90f8093cfbfbb566a17468705e4a2c1ee691e0fb9b45dc55edd49b0cf62c60a8a4428b2843914dabb95ff2eb92f10
-  data.tar.gz: a00f04d5951f343a0e0c39bc942aec73863547630807ccd944e0d2a3a459ee52170ce77f4a3fd10c2019c5fed49f570ea174531679d61cf4e5051dea1e4036ac
+  metadata.gz: bb863173d2577d304c03a4e6d66eddc385a62950bf30af00ed29c4abb9039b0290402771f58c9ede11cf9f26d5945136997d78148590871b7247e13b4d3db7cf
+  data.tar.gz: a624efeabf2bdbd7b83b59aa2854e4ebda00c5c476849c03fc585d967810b30fd5d118fbf13f412c40cb6e7fa1fe020f619cc9ede0cd72989c25504f3f8e0e53

data/.github/workflows/jest.yml

@@ -8,31 +8,20 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [12.x, 14.x, 15.x]
+        node: [12.x, 14.x, 16.x]
 
     runs-on: ${{ matrix.os }}
 
     steps:
-      - name: Install yarn maybe
-        run: which yarn || sudo npm install -g yarn
-
       - uses: actions/checkout@v2
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ matrix.node }}-yarn-
-
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
+          cache: yarn
+
+      - name: Install yarn maybe
+        run: which yarn || npm install -g yarn
 
       - name: Install dependencies
         run: yarn --frozen-lockfile

data/.github/workflows/js-lint.yml

@@ -9,31 +9,20 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14.x]
+        node: [14]
 
     runs-on: ${{ matrix.os }}
 
     steps:
-      - name: Install yarn maybe
-        run: which yarn || sudo npm install -g yarn
-
       - uses: actions/checkout@v2
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
+          cache: yarn
+
+      - name: Install yarn maybe
+        run: which yarn || npm install -g yarn
 
       - name: Install dependencies
         run: yarn --frozen-lockfile

data/.github/workflows/ruby.yml

@@ -7,33 +7,21 @@ jobs:
     name: Ruby specs
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ endsWith(matrix.ruby, 'head') || matrix.ruby == 'debug' || matrix.experimental }}
-    env:
-      BUNDLE_JOBS: 4
-      BUNDLE_RETRY: 3
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        ruby: [
-          2.4,
-          2.5,
-          2.6,
-          2.7,
-          3.0
-        ]
-        gemfile: [
-          "gemfiles/Gemfile-rails.5.2.x",
-          "gemfiles/Gemfile-rails.6.0.x",
-          "gemfiles/Gemfile-rails.6.1.x"
-        ]
+        ruby:
+          - 2.7
+          - "3.0"
+        gemfile:
+          - gemfiles/Gemfile-rails.5.2.x
+          - gemfiles/Gemfile-rails.6.0.x
+          - gemfiles/Gemfile-rails.6.1.x
         exclude:
-          - ruby: 2.4
-            gemfile: gemfiles/Gemfile-rails.6.0.x
-          - ruby: 2.4
-            gemfile: gemfiles/Gemfile-rails.6.1.x
           - ruby: 2.5
             gemfile: gemfiles/Gemfile-rails.6.1.x
-          - ruby: 3.0
+          - ruby: "3.0"
             gemfile: gemfiles/Gemfile-rails.5.2.x
         experimental: [false]
         include:
@@ -41,33 +29,20 @@ jobs:
             os: ubuntu-latest
             gemfile: gemfiles/Gemfile-rails-edge
             experimental: true
-          - ruby: 3.0
+          - ruby: "3.0"
             os: ubuntu-latest
             gemfile: gemfiles/Gemfile-rails-edge
             experimental: true
 
+    env:
+      BUNDLE_GEMFILE: ${{ matrix.gemfile }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        with:
-          path: /home/runner/bundle
-          key: bundle-use-ruby-${{ matrix.ruby }}-${{ matrix.gemfile }}-gems-${{ hashFiles(matrix.gemfile) }}-${{ hashFiles('**/*.gemspec') }}
-          restore-keys: |
-            bundle-use-ruby-${{ matrix.ruby }}-${{ matrix.gemfile }}-gems-
-
-      - name: Install yarn maybe
-        run: which yarn || sudo npm install -g yarn
 
       - uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
-
-      - name: Bundle install
-        run: |
-          gem install bundler -v 2.1.4
-          bundle config path /home/runner/bundle
-          bundle config --global gemfile ${{ matrix.gemfile }}
-          bundle install --jobs 4 --retry 3
+          bundler-cache: true # Run "bundle install", and cache the result automatically.
 
       - name: Ruby specs
-        run: bundle exec rake test
+        run: bundle exec rake

data/.rubocop.yml

@@ -1,6 +1,6 @@
 require: rubocop-performance
 AllCops:
-  TargetRubyVersion: 2.4
+  TargetRubyVersion: 2.7
   # RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
   # to ignore them, so only the ones explicitly set in this file are enabled.
   DisabledByDefault: true

data/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 **Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
 
-## [[6.0.0]](https://github.com/rails/webpacker/compare/v5.1.1...master) - 2021-TBD
+## [[6.0.0]](https://github.com/rails/webpacker/compare/v5.4.3...master) - 2021-TBD
 
 Please see [UPGRADE GUIDE](./docs/v6_upgrade.md) for more information.
 
@@ -26,14 +26,26 @@ environment.loaders.append('nodeModules', nodeModules)
 - Splitchunks enabled by default
 - CSS extraction enabled by default, except when devServer is configured and running
 
+## [[5.4.3]](https://github.com/rails/webpacker/compare/v5.4.2...v5.4.3) - 2021-09-14
+
+-  Specify webpack-dev-server to be v3, to avoid getting webpack-dev-server v4 ([#3121](https://github.com/rails/webpacker/pull/3121))
+
+## [[5.4.2]](https://github.com/rails/webpacker/compare/v5.4.1...v5.4.2) - 2021-08-20
+
+- Fix babel warning about private-methods in `@babel/plugin-proposal-private-property-in-object` as well ([67fa6edf](https://github.com/rails/webpacker/commit/67fa6edf697340cbd5a5518afebac871ef74769b)).
+
+## [[5.4.1]](https://github.com/rails/webpacker/compare/v5.4.0...v5.4.1) - 2021-08-20
+
+- Update all dependencies within the same major version ([#3120](https://github.com/rails/webpacker/pull/3120))
+- Fix babel warning about private-methods ([#3016](https://github.com/rails/webpacker/pull/3016))
+
 ## [[5.4.0]](https://github.com/rails/webpacker/compare/v5.3.0...v5.4.0) - 2021-05-18
 
-- Fix compatibility with Psych 4
+- Fix compatibility with Psych 4 ([ceaf826d](https://github.com/rails/webpacker/commit/ceaf826d84230aaadbefdbaaf560d474a96affcc))
 
 ## [[5.3.0]](https://github.com/rails/webpacker/compare/v5.2.1...v5.3.0) - 2021-04-27
 
 - Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
-
 - Keep backups, even when they're old [#2912](https://github.com/rails/webpacker/pull/2912)
 
 ## [[5.2.2]](https://github.com/rails/webpacker/compare/v5.2.1...v5.2.2) - 2021-04-27

data/CONTRIBUTING.md

@@ -3,31 +3,50 @@
 1. Install [Yarn](https://yarnpkg.com/)
 
 2. Run the following commands to set up the development environment.
+
 ```
 bundle install
 yarn
 ```
 
 ## Making sure your changes pass all tests
+
 There are a number of automated checks which run on GitHub Actions when a pull request is created.
+
 You can run those checks on your own locally to make sure that your changes would not break the CI build.
 
 ### 1. Check the code for JavaScript style violations
+
 ```
 yarn lint
 ```
 
 ### 2. Check the code for Ruby style violations
+
 ```
 bundle exec rubocop
 ```
 
 ### 3. Run the JavaScript test suite
+
 ```
 yarn test
 ```
 
 ### 4. Run the Ruby test suite
+
 ```
 bundle exec rake test
 ```
+
+#### 4.1 Run a single ruby test file
+
+```
+bundle exec rake test TEST=test/rake_tasks_test.rb
+```
+
+#### 4.2 Run a single ruby test
+
+```
+ruby -I test test/rake_tasks_test.rb -n test_rake_webpacker_install
+```

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    webpacker (6.0.0.rc.5)
+    webpacker (6.0.0.rc.6)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -84,16 +84,16 @@ GEM
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (1.0.1)
+    marcel (1.0.2)
     method_source (1.0.0)
     mini_mime (1.1.1)
     mini_portile2 (2.6.1)
     minitest (5.14.4)
     nio4r (2.5.8)
-    nokogiri (1.12.3)
+    nokogiri (1.12.4)
       mini_portile2 (~> 2.6.1)
       racc (~> 1.4)
-    parallel (1.19.1)
+    parallel (1.21.0)
     parser (3.0.2.0)
       ast (~> 2.4.1)
     racc (1.5.2)
@@ -132,7 +132,7 @@ GEM
     rake (13.0.6)
     regexp_parser (2.1.1)
     rexml (3.2.5)
-    rubocop (1.19.1)
+    rubocop (1.21.0)
       parallel (~> 1.10)
       parser (>= 3.0.0.0)
       rainbow (>= 2.2.2, < 4.0)
@@ -158,7 +158,7 @@ GEM
     thor (1.1.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.0.0)
+    unicode-display_width (2.1.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -180,4 +180,4 @@ DEPENDENCIES
   webpacker!
 
 BUNDLED WITH
-   2.2.25
+   2.2.30

data/README.md

@@ -11,7 +11,7 @@
 Webpacker makes it easy to use the JavaScript pre-processor and bundler
 [Webpack v5](https://webpack.js.org/)
 to manage application-like JavaScript in Rails. It can coexist with the asset pipeline,
-leaving Webpack responsible solely for app-like JavaScript, or it can be used exclusively, making it also responsible for images, fronts, and CSS as well.
+leaving Webpack responsible solely for app-like JavaScript, or it can be used exclusively, making it also responsible for images, fonts, and CSS.
 
 **NOTE:** The master branch now hosts the code for v6.x.x. Please refer to [5-x-stable](https://github.com/rails/webpacker/tree/5-x-stable) branch for 5.x documentation.
 
@@ -78,10 +78,10 @@ leaving Webpack responsible solely for app-like JavaScript, or it can be used ex
 
 ## Installation
 
-You can configure a new Rails application with Webpacker right from the start using the `--webpack` option:
+You can configure a new Rails application with Webpacker right from the start using the `-j webpack` option:
 
 ```bash
-rails new myapp --webpack
+rails new myapp -j webpack
 ```
 
 Or you can add it later by changing your `Gemfile`:
@@ -113,11 +113,10 @@ yarn install
 Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
 
 ```yml
-app/packs:
-  ├── entrypoints:
-  │   # Only Webpack entry files here
-  │   └── application.js
-  │   └── application.css
+app/javascript:
+  # Only Webpack entry files here
+  └── application.js
+  └── application.css
   └── src:
   │   └── my_component.js
   └── stylesheets:
@@ -139,13 +138,13 @@ packs with the chunks in your view, which creates html tags for all the chunks.
 The result looks like this:
 
 ```erb
-<%= javascript_pack_tag 'calendar', 'map' %>
+<%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
 
-<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
+<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
+<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload" defer"></script>
+<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
+<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
 ```
 
 **Important:** Pass all your pack names as multiple arguments, not multiple calls, when using `javascript_pack_tag` and the **`stylesheet_pack_tag`. Otherwise, you will get duplicated chunks on the page. Be especially careful if you might be calling these view helpers from your view, partials, and the layout for a page. You will need some logic to ensure you call the helpers only once with multiple arguments.
@@ -190,31 +189,41 @@ If you want to use images in your stylesheets:
   background-image: url('../images/logo.svg')
 }
 ```
+##### Defer for `javascript_pack_tag`
+Note, the default of "defer" for the `javascript_pack_tag`. You can override that to `false`. If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/packs/entrypoints/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
 
 #### Server-Side Rendering (SSR)
 
-Note, if you are using server-side rendering of JavaScript with dynamic code-spliting, as is often done with extensions to Webpacker, like [React on Rails](https://github.com/shakacode/react_on_rails), your JavaScript should create the link prefetch HTML tags that you will use, so you won't need to use to `asset_pack_path` in those circumstances.
+Note, if you are using server-side rendering of JavaScript with dynamic code-splitting, as is often done with extensions to Webpacker, like [React on Rails](https://github.com/shakacode/react_on_rails), your JavaScript should create the link prefetch HTML tags that you will use, so you won't need to use to `asset_pack_path` in those circumstances.
 
 **Note:** In order for your styles or static assets files to be available in your view, you would need to link them in your "pack" or entry file. Otherwise, Webpack won't know to package up those files.
 
-
 ### Development
 
 Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`. Both are thin wrappers around the standard `webpack.js` and `webpack-dev-server.js` executables to ensure that the right configuration files and environmental variables are loaded based on your environment.
 
 In development, Webpacker compiles on demand rather than upfront by default. This happens when you refer to any of the pack assets using the Webpacker helper methods. This means that you don't have to run any separate processes. Compilation errors are logged to the standard Rails log. However, this auto-compilation happens when a web request is made that requires an updated webpack build, not when files change. Thus, that can be painfully slow for front-end development in this default way. Instead, you should either run the `bin/webpack --watch` or run `./bin/webpack-dev-server`
 
-If you want to use live code reloading, or you have enough JavaScript that on-demand compilation is too slow, you'll need to run `./bin/webpack-dev-server` or `ruby ./bin/webpack-dev-server`. Windows users will need to run these commands in a terminal separate from `bundle exec rails s`. This process will watch for changes in the `app/packs/entrypoints/*.js` files and automatically reload the browser to match. This feature is also known as [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/).
+If you want to use live code reloading, or you have enough JavaScript that on-demand compilation is too slow, you'll need to run `./bin/webpack-dev-server` or `ruby ./bin/webpack-dev-server`. Windows users will need to run these commands in a terminal separate from `bundle exec rails s`. This process will watch for changes in the relevant files, defined by `webpacker.yml` configuration settings for `source_path`, `source_entry_path`, and `additional_paths`, and it will then automatically reload the browser to match. This feature is also known as [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/).
 
 ```bash
 # webpack dev server
 ./bin/webpack-dev-server
 
 # watcher
-./bin/webpack --watch --colors --progress
+./bin/webpack --watch --progress
 
 # standalone build
-./bin/webpack
+./bin/webpack --progress
+
+# Help
+./bin/webpack help
+
+# Version
+./bin/webpack version
+
+# Info
+./bin/webpack info
 ```
 
 Once you start this webpack development server, Webpacker will automatically start proxying all webpack asset requests to this server. When you stop this server, Rails will detect that it's not running and Rails will revert back to on-demand compilation _if_ you have the `compile` option set to true in your `config/webpacker.yml`

data/docs/troubleshooting.md

@@ -160,7 +160,11 @@ default: &default
 
 ### Using global variables for dependencies
 
-If you want to access any dependency without importing it everywhere or use it directly in your dev tools, please check: [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/)
+If you want to access any dependency without importing it everywhere or use it directly in your dev tools, please check: [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/) and the [webpack docs on shimming globals](https://webpack.js.org/guides/shimming/#shimming-globals).
+
+Note, if you are exposing globals, like jQuery, to non-webpack dependencies (like an inline script) via the [expose-loader](https://webpack.js.org/loaders/expose-loader/), you will need to override the default of `defer: true` to be `defer:false` your call to the `javascript_pack_tag` so that the browser will load your bundle to setup the global variable before other code depends on it. However, you really should try to remove the dependendency on such globals.
+
+Thus ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader manages runtime dependencies to global symbols.
 
 **You don't need to assign dependencies on `window`.**
 

data/docs/v6_upgrade.md

@@ -10,15 +10,29 @@ Webpacker used to configure Webpack indirectly, which lead to a [complicated sec
 
 This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for [Vue](https://github.com/rails/webpacker#other-frameworks).
 
-## How to upgrade to Webpacker 6
+## How to upgrade to Webpacker v6 from v5
 
-1. If your `source_path` is `app/javascript`, rename it to `app/packs`
-2. If your `source_entry_path` is `packs`, rename it to `entrypoints`
-3. Rename `config/webpack` to `config/webpack_old`
-4. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
-5. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
-6. Remove .browserslistrc from the root of your Rails app
-7. Upgrade the Webpacker Ruby gem and NPM package
+1. If you are changing from the v5 default for `source_entry_path`:
+  ```yml
+    source_path: app/javascript
+    source_entry_path: packs
+  ```
+  to the v6 default:
+  ```yml
+    source_path: app/javascript
+    source_entry_path: /
+  ```
+  Then move your `app/javascript/packs/*` (including `application.js`) to `app/javascript/`.
+
+  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 rails/webpacker v6.
+
+2. Rename `config/webpack` to `config/webpack_old`
+
+3. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
+
+4. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
+
+5. Upgrade the Webpacker Ruby gem and NPM package
 
 Note: [Check the releases page to verify the latest version](https://github.com/rails/webpacker/releases), and make sure to install identical version numbers of webpacker gem and `@rails/webpacker` npm package. (Gems use a period and packages use a dot between the main version number and the beta version.)
 
@@ -41,9 +55,11 @@ Example going to a specific version:
   bundle exec rails webpacker:install
   ```
 
-7. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` or `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932).  If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/packs/entrypoints/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
-8. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
-9. Copy over any custom webpack config from `config/webpack_old`. Common code previously called 'environment' should be changed to 'base', and import `environment` changed to `webpackConfig`.
+6. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` and **at most one call** to `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932).  If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
+
+7. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
+
+8. Copy over any custom webpack config from `config/webpack_old`. Common code previously called 'environment' should be changed to 'base', and import `environment` changed to `webpackConfig`.
 
   ```js
   // config/webpack/base.js
@@ -53,23 +69,45 @@ Example going to a specific version:
   module.exports = merge(webpackConfig, customConfig)
   ```
 
-10. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
-
-11. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
-```json
-"babel": {
-  "presets": [
-    "./node_modules/@rails/webpacker/package/babel/preset.js"
-  ]
-}
-```
-12. Remove `postcss.config.js` if you don't use `PostCSS`.
-13. `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/rails/webpacker/blob/master/README.md#webpack-configuration)
-
-```js
-{
-  resolve: {
-    extensions: ['.ts', '.tsx', '.vue', '.css']
+9. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
+
+10. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
+
+  ```json
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
+    ]
   }
-}
-```
+  ```
+
+11. Remove `postcss.config.js` if you don't use `PostCSS`.
+
+12. `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/rails/webpacker/blob/master/README.md#webpack-configuration)
+
+  ```js
+  {
+    resolve: {
+      extensions: ['.ts', '.tsx', '.vue', '.css']
+    }
+  }
+  ```
+
+13. 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.
+
+14. If `bin/yarn` does not exist, create an executable [yarn](https://github.com/rails/webpacker/blob/master/lib/install/bin/yarn) file in your `/bin` directory.
+
+15. Remove overlapping dependencies from your `package.json` and rails/webpacker's `package.json`. For example, don't include `webpack` directly as that's a dependency of rails/webpacker.
+
+16. 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`.
+
+17. Make sure that you can run `bin/webpack` without errors.
+
+18. 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`.
+
+19. Try your app!
+
+## Examples of v5 to v6
+
+1. [React on Rails Project with HMR and SSR](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/compare/webpacker-5.x...master)
+2. [Vue and Sass Example](https://github.com/guillaumebriday/upgrade-webpacker-5-to-6)

data/lib/install/{packs/entrypoints/application.js → application.js}

@@ -1,19 +1,15 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/packs and only use these pack files to reference
+// a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
-// Uncomment to copy all static images under ../images to the output folder and reference
+// Uncomment to copy all static images under ./images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
 //
-// const images = require.context('../images', true)
+// const images = require.context('./images', true)
 // const imagePath = (name) => images(name, true)
-
-// Activate Active Storage
-// import * as ActiveStorage from "@rails/activestorage"
-// ActiveStorage.start()

data/lib/install/bin/webpack

@@ -1,17 +1,14 @@
 #!/usr/bin/env ruby
 
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
 require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
 require "bundler/setup"
-
 require "webpacker"
 require "webpacker/webpack_runner"
 
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::WebpackRunner.run(ARGV)

data/lib/install/config/webpacker.yml

@@ -1,8 +1,8 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/packs
-  source_entry_path: entrypoints
+  source_path: app/javascript
+  source_entry_path: /
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/webpacker
@@ -26,6 +26,8 @@ development:
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
     client:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
       overlay: true

data/lib/install/package.json

@@ -2,8 +2,6 @@
   "name": "app",
   "private": true,
   "dependencies": {
-    "@rails/activestorage": "latest",
-    "@rails/actioncable": "latest"
   },
   "version": "0.1.0",
   "babel": {