Use single webpack config, /webpack.config.js for rails/webpacker, matching jsbundling-rails #3240

justin808 · 2021-11-28T22:35:29Z

What?

Let's have the webpack config for rails/webpacker match jsbundling-rails and use /webpack.config.js.

Why?

KISS, DRY

Simplicity and DRY. The default install was already cleaned up so
there are no differences between installing test.js, development.js,
and prododuction.js. This is just more clutter for people to dig
through.
Avoid confusion. Most rails developers think about the RAILS_ENV.
It's not at all obvious that old configuration file used was based on
the NODE_ENV. And what if you wanted to adjust the configuration based
on the RAILS_ENV. Surely, you could have gotten confused. Additionally,
the default of using NODE_ENV for building a Node file was also
non-obvious.
Easy upgrade. The upgrade from using the old files to the new configuration only
requires copy/pasting a few lines of code into the new configuration
file.

Demo of the migration

Single change in shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh

Visual of the current, more complicated flow

Here is a clip from my slides from my past RailsConf talk on the topic:

See rails/webpacker#3240 This commit shows the modest change needed for the upgrade to one config file.

for peer deps change

Co-authored-by: Guillaume Briday <[email protected]>

This dries up the list of peers to package.json

frullah · 2022-01-01T06:50:02Z

docs/v6_upgrade.md

+   ```
+
+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, `config.webpack.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:


i think config.webpack.js should be webpack.config.js

Suggested change

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, `config.webpack.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:

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/webpack.config.js` to conditionally load the old file based on the NODE_ENV with this snippet:

I agree! Per the docs: https://webpack.js.org/configuration/, webpack.config.js is what's used.

nguyenthetoan · 2022-01-01T07:27:09Z

docs/v6_upgrade.md

-  Then consider moving your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and updating the configuration file. 
+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. Upgrade the Webpacker Ruby gem and the NPM package


Suggested change

1. Upgrade the Webpacker Ruby gem and the NPM package

2. Upgrade the Webpacker Ruby gem and the NPM package

Using 1. everywhere results in less merge conflicts!

@guillaumebriday, @dhh Do you agree that only 1 is better for a numbered markdown list?

nguyenthetoan · 2022-01-01T07:27:33Z

docs/v6_upgrade.md

+
+   module.exports = envSpecificConfig()
+   ```
+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`. 


Suggested change

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`.

3. 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`.

nguyenthetoan · 2022-01-01T07:27:52Z

docs/v6_upgrade.md


-2. **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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.
+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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.


Suggested change

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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.

4. **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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.

nguyenthetoan · 2022-01-01T07:29:29Z

docs/v6_upgrade.md

-  # Gemfile
-  gem 'webpacker', '6.0.0.rc.5'
-  ```
+1. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.


Suggested change

1. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.

5. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.

nguyenthetoan · 2022-01-01T07:29:42Z

docs/v6_upgrade.md

-  ```bash
-  bundle install
-  ```
+1. 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`.


Suggested change

1. 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`.

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`.

nguyenthetoan · 2022-01-01T07:31:45Z

docs/v6_upgrade.md


-17. Make sure that you can run `bin/webpack` without errors.
+1. Make sure that you can run `bin/webpack` without errors.


Suggested change

1. Make sure that you can run `bin/webpack` without errors.

16. Make sure that you can run `bin/webpack` without errors.

nguyenthetoan · 2022-01-01T07:31:53Z

docs/v6_upgrade.md


-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`.
+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`.


Suggested change

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`.

17. Test your production build locally by 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`.

nguyenthetoan · 2022-01-01T07:32:00Z

docs/v6_upgrade.md


-19. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.
+1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.


Suggested change

1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.

18. Run `yarn add -D webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.

nguyenthetoan · 2022-01-01T07:32:09Z

docs/v6_upgrade.md


-20. Try your app!
+1. Try your app!


Suggested change

1. Try your app!

19. Try your app!

nguyenthetoan · 2022-01-01T07:38:36Z

docs/v6_upgrade.md

-    source_entry_path: /
-  ```
-  Then consider moving your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and updating the configuration file. 
+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.


Suggested change

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. Ensure you have a clean working git branch. You will be overwriting all your files and reverting the changes that you don't want. It's recommended removing `node_modules` directory and running `rails assets:clobber` before upgrading.

justin808 · 2022-01-10T20:07:48Z

I think that it's worth considering having the having the default webpack config match https://github.com/rails/jsbundling-rails (and webpack's default):

So we can have the default be /webpack.config.js.

Agree? If so, I'll make the change.

CC: @guillaumebriday

Why? This allows easy updating of the dependencies. Let's lock at the major versions, and loosen as requested. See a working version of this: shakacode/react_on_rails_demo_ssr_hmr#23 See original PR: rails/webpacker#3234

Why? KISS, DRY 1. Simplicity and DRY. The default install was already cleaned up so there are no differences between installing test.js, development.js, and prododuction.js. This is just more clutter for people to dig through. 2. Avoid confusion. Most rails developers think about the RAILS_ENV. It's not at all obvious that old configuration file used was based on the NODE_ENV. And what if you wanted to adjust the configuration based on the RAILS_ENV. Surely, you could have gotten confused. Additionally, the default of using NODE_ENV for building a Node file was also non-obvious. 3. Easy upgrade. The upgrade from using the old files to the new configuration only requires copy/pasting a few lines of code into the new configuration file.

justin808 · 2022-01-20T00:19:24Z

Merged: shakacode/shakapacker#5.

justin808 requested review from dhh and guillaumebriday November 28, 2021 22:37

justin808 self-assigned this Nov 28, 2021

justin808 added enhancement javascript Pull requests that update Javascript code labels Nov 28, 2021

justin808 added this to the 6.0 milestone Nov 28, 2021

justin808 added a commit to shakacode/react_on_rails_demo_ssr_hmr that referenced this pull request Nov 28, 2021

Demo of migratio for one webpack config file

46837c3

See rails/webpacker#3240 This commit shows the modest change needed for the upgrade to one config file.

justin808 added a commit to shakacode/react_on_rails_demo_ssr_hmr that referenced this pull request Nov 28, 2021

Demo of migration for one webpack config file

a134581

See rails/webpacker#3240 This commit shows the modest change needed for the upgrade to one config file.

justin808 mentioned this pull request Nov 28, 2021

Demo of migration for one webpack config file shakacode/react_on_rails_demo_ssr_hmr#25

Closed

justin808 force-pushed the justin808-use-one-config branch from d3b99f7 to 792c161 Compare December 5, 2021 22:47

justin808 and others added 5 commits December 5, 2021 12:48

Convert to all peer dependencies

babdd6d

Update install and upgrade instructions

f0a9c29

for peer deps change

Use the ^ syntax

75b6bcc

Update README.md

27c5851

Co-authored-by: Guillaume Briday <[email protected]>

Dynamically list the peer packages to add

2dca6fb

This dries up the list of peers to package.json

frullah reviewed Jan 1, 2022

View reviewed changes

nguyenthetoan reviewed Jan 1, 2022

View reviewed changes

justin808 changed the title ~~Use single webpack config for rails/webpacker~~ Use single webpack config, /webpack.config.js for rails/webpacker, matching jsbundling-rails Jan 10, 2022

justin808 added 3 commits January 16, 2022 21:20

README update

ddc99fa

Switch to peer dependencies

e99432b

Why? This allows easy updating of the dependencies. Let's lock at the major versions, and loosen as requested. See a working version of this: shakacode/react_on_rails_demo_ssr_hmr#23 See original PR: rails/webpacker#3234

justin808 force-pushed the justin808-use-one-config branch from 792c161 to 84c31d0 Compare January 17, 2022 07:42

justin808 mentioned this pull request Jan 17, 2022

Use single webpack config for rails/webpacker shakacode/shakapacker#5

Merged

dhh closed this Jan 19, 2022

justin808 deleted the justin808-use-one-config branch April 6, 2022 08:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use single webpack config, /webpack.config.js for rails/webpacker, matching jsbundling-rails #3240

Use single webpack config, /webpack.config.js for rails/webpacker, matching jsbundling-rails #3240

justin808 commented Nov 28, 2021 •

edited

Loading

frullah Jan 1, 2022 •

edited

Loading

justin808 Jan 3, 2022

nguyenthetoan Jan 1, 2022

justin808 Jan 3, 2022 •

edited

Loading

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

nguyenthetoan Jan 1, 2022

justin808 commented Jan 10, 2022

justin808 commented Jan 20, 2022

	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, `config.webpack.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:
	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/webpack.config.js` to conditionally load the old file based on the NODE_ENV with this snippet:

	1. Upgrade the Webpacker Ruby gem and the NPM package
	2. Upgrade the Webpacker Ruby gem and the NPM package

	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`.
	3. 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`.


		2. 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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.
		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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.

	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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.
	4. 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 rails/webpacker v6. Move those files to the top level, adjusting any imports in those files.

	1. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.
	5. Update `webpack-dev-server` to the current version, greater than 4.2, updating `package.json`.


		17. Make sure that you can run `bin/webpack` without errors.
		1. Make sure that you can run `bin/webpack` without errors.

	1. Make sure that you can run `bin/webpack` without errors.
	16. 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`.
		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. 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`.
	17. Test your production build locally by 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. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.
		1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.

	1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.
	18. Run `yarn add -D webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.

	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. Ensure you have a clean working git branch. You will be overwriting all your files and reverting the changes that you don't want. It's recommended removing `node_modules` directory and running `rails assets:clobber` before upgrading.

Use single webpack config, /webpack.config.js for rails/webpacker, matching jsbundling-rails #3240

Use single webpack config, /webpack.config.js for rails/webpacker, matching jsbundling-rails #3240

Conversation

justin808 commented Nov 28, 2021 • edited Loading

What?

Why?

KISS, DRY

Demo of the migration

Visual of the current, more complicated flow

frullah Jan 1, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 Jan 3, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justin808 commented Jan 10, 2022

justin808 commented Jan 20, 2022

justin808 commented Nov 28, 2021 •

edited

Loading

frullah Jan 1, 2022 •

edited

Loading

justin808 Jan 3, 2022 •

edited

Loading