webpacker 4.3.0 → 6.0.0.rc.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (200) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +30 -0
  4. data/.github/workflows/js-lint.yml +31 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +48 -0
  7. data/.gitignore +2 -0
  8. data/.node-version +1 -1
  9. data/.rubocop.yml +117 -16
  10. data/CHANGELOG.md +91 -5
  11. data/CONTRIBUTING.md +20 -1
  12. data/Gemfile +1 -0
  13. data/Gemfile.lock +121 -109
  14. data/README.md +365 -387
  15. data/config/README.md +3 -0
  16. data/config/webpacker.yml +1 -0
  17. data/docs/deployment.md +9 -11
  18. data/docs/developing_webpacker.md +29 -0
  19. data/docs/troubleshooting.md +64 -26
  20. data/docs/v6_upgrade.md +113 -0
  21. data/gemfiles/Gemfile-rails-edge +1 -1
  22. data/gemfiles/{Gemfile-rails.4.2.x → Gemfile-rails.6.1.x} +4 -1
  23. data/lib/install/{javascript/packs/application.js → application.js} +2 -5
  24. data/lib/install/bin/webpack +4 -7
  25. data/lib/install/bin/yarn +18 -0
  26. data/lib/install/config/webpack/base.js +3 -0
  27. data/lib/install/config/webpack/development.js +2 -2
  28. data/lib/install/config/webpack/production.js +2 -2
  29. data/lib/install/config/webpack/test.js +2 -2
  30. data/lib/install/config/webpacker.yml +22 -54
  31. data/lib/install/package.json +15 -0
  32. data/lib/install/template.rb +66 -23
  33. data/lib/tasks/webpacker/binstubs.rake +6 -4
  34. data/lib/tasks/webpacker/check_binstubs.rake +4 -4
  35. data/lib/tasks/webpacker/check_node.rake +18 -8
  36. data/lib/tasks/webpacker/check_yarn.rake +19 -10
  37. data/lib/tasks/webpacker/clean.rake +12 -6
  38. data/lib/tasks/webpacker/clobber.rake +9 -5
  39. data/lib/tasks/webpacker/compile.rake +4 -2
  40. data/lib/tasks/webpacker/info.rake +12 -10
  41. data/lib/tasks/webpacker/install.rake +6 -4
  42. data/lib/tasks/webpacker/verify_config.rake +14 -0
  43. data/lib/tasks/webpacker/verify_install.rake +1 -10
  44. data/lib/tasks/webpacker/yarn_install.rake +13 -16
  45. data/lib/tasks/webpacker.rake +2 -11
  46. data/lib/tasks/yarn.rake +38 -0
  47. data/lib/webpacker/commands.rb +40 -11
  48. data/lib/webpacker/compiler.rb +23 -12
  49. data/lib/webpacker/configuration.rb +24 -33
  50. data/lib/webpacker/dev_server.rb +6 -0
  51. data/lib/webpacker/dev_server_proxy.rb +3 -1
  52. data/lib/webpacker/dev_server_runner.rb +34 -10
  53. data/lib/webpacker/env.rb +5 -1
  54. data/lib/webpacker/helper.rb +72 -87
  55. data/lib/webpacker/instance.rb +4 -0
  56. data/lib/webpacker/manifest.rb +6 -7
  57. data/lib/webpacker/railtie.rb +8 -45
  58. data/lib/webpacker/runner.rb +1 -0
  59. data/lib/webpacker/version.rb +1 -1
  60. data/lib/webpacker/webpack_runner.rb +30 -4
  61. data/lib/webpacker.rb +1 -1
  62. data/package/__tests__/config.js +6 -27
  63. data/package/__tests__/dev_server.js +2 -0
  64. data/package/__tests__/development.js +18 -13
  65. data/package/__tests__/env.js +16 -4
  66. data/package/__tests__/index.js +9 -0
  67. data/package/__tests__/production.js +6 -6
  68. data/package/__tests__/staging.js +7 -6
  69. data/package/__tests__/test.js +4 -5
  70. data/package/babel/preset.js +54 -0
  71. data/package/config.js +7 -12
  72. data/package/configPath.js +3 -0
  73. data/package/dev_server.js +1 -1
  74. data/package/env.js +14 -6
  75. data/package/environments/__tests__/base.js +26 -31
  76. data/package/environments/base.js +78 -128
  77. data/package/environments/development.js +47 -43
  78. data/package/environments/production.js +66 -66
  79. data/package/environments/test.js +2 -2
  80. data/package/index.js +15 -8
  81. data/package/inliningCss.js +7 -0
  82. data/package/rules/babel.js +20 -11
  83. data/package/rules/coffee.js +6 -0
  84. data/package/rules/erb.js +15 -0
  85. data/package/rules/file.js +21 -18
  86. data/package/rules/index.js +16 -18
  87. data/package/rules/less.js +22 -0
  88. data/package/rules/raw.js +5 -0
  89. data/package/rules/sass.js +14 -6
  90. data/package/rules/stylus.js +26 -0
  91. data/package/utils/get_style_rule.js +28 -36
  92. data/package/utils/helpers.js +28 -35
  93. data/package.json +26 -46
  94. data/test/command_test.rb +76 -0
  95. data/test/compiler_test.rb +4 -11
  96. data/test/configuration_test.rb +5 -35
  97. data/test/dev_server_runner_test.rb +36 -6
  98. data/test/engine_rake_tasks_test.rb +39 -0
  99. data/test/helper_test.rb +77 -60
  100. data/test/manifest_test.rb +53 -6
  101. data/test/mounted_app/Rakefile +4 -0
  102. data/test/mounted_app/test/dummy/Rakefile +3 -0
  103. data/test/mounted_app/test/dummy/bin/rails +3 -0
  104. data/test/mounted_app/test/dummy/bin/rake +3 -0
  105. data/test/mounted_app/test/dummy/config/application.rb +10 -0
  106. data/test/mounted_app/test/dummy/config/environment.rb +3 -0
  107. data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
  108. data/test/mounted_app/test/dummy/config.ru +5 -0
  109. data/test/mounted_app/test/dummy/package.json +7 -0
  110. data/test/rake_tasks_test.rb +12 -10
  111. data/test/test_app/app/{javascript/packs → packs/entrypoints}/application.js +1 -1
  112. data/test/test_app/app/packs/entrypoints/multi_entry.css +4 -0
  113. data/test/test_app/app/packs/entrypoints/multi_entry.js +4 -0
  114. data/test/test_app/config/application.rb +0 -1
  115. data/test/test_app/config/initializers/inspect_autoload_paths.rb +1 -0
  116. data/test/test_app/config/webpacker.yml +7 -27
  117. data/test/test_app/config/webpacker_other_location.yml +79 -0
  118. data/test/test_app/config/webpacker_public_root.yml +0 -1
  119. data/test/test_app/public/packs/manifest.json +36 -17
  120. data/test/test_app/some.config.js +0 -0
  121. data/test/webpack_runner_test.rb +10 -4
  122. data/test/webpacker_test.rb +21 -0
  123. data/webpacker.gemspec +5 -4
  124. data/yarn.lock +3387 -6898
  125. metadata +90 -99
  126. data/.travis.yml +0 -57
  127. data/docs/assets.md +0 -119
  128. data/docs/cloud9.md +0 -310
  129. data/docs/css.md +0 -254
  130. data/docs/docker.md +0 -68
  131. data/docs/engines.md +0 -200
  132. data/docs/env.md +0 -65
  133. data/docs/es6.md +0 -72
  134. data/docs/folder-structure.md +0 -66
  135. data/docs/misc.md +0 -23
  136. data/docs/props.md +0 -223
  137. data/docs/testing.md +0 -137
  138. data/docs/typescript.md +0 -126
  139. data/docs/v4-upgrade.md +0 -142
  140. data/docs/webpack-dev-server.md +0 -92
  141. data/docs/webpack.md +0 -364
  142. data/docs/yarn.md +0 -23
  143. data/gemfiles/Gemfile-rails.5.0.x +0 -9
  144. data/gemfiles/Gemfile-rails.5.1.x +0 -9
  145. data/lib/install/angular.rb +0 -23
  146. data/lib/install/coffee.rb +0 -25
  147. data/lib/install/config/.browserslistrc +0 -1
  148. data/lib/install/config/babel.config.js +0 -72
  149. data/lib/install/config/postcss.config.js +0 -12
  150. data/lib/install/config/webpack/environment.js +0 -3
  151. data/lib/install/elm.rb +0 -39
  152. data/lib/install/erb.rb +0 -25
  153. data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
  154. data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
  155. data/lib/install/examples/angular/hello_angular/index.ts +0 -8
  156. data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
  157. data/lib/install/examples/angular/hello_angular.js +0 -7
  158. data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
  159. data/lib/install/examples/elm/Main.elm +0 -55
  160. data/lib/install/examples/elm/hello_elm.js +0 -16
  161. data/lib/install/examples/erb/hello_erb.js.erb +0 -6
  162. data/lib/install/examples/react/babel.config.js +0 -87
  163. data/lib/install/examples/react/hello_react.jsx +0 -26
  164. data/lib/install/examples/react/tsconfig.json +0 -20
  165. data/lib/install/examples/stimulus/application.js +0 -1
  166. data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
  167. data/lib/install/examples/stimulus/controllers/index.js +0 -9
  168. data/lib/install/examples/svelte/app.svelte +0 -11
  169. data/lib/install/examples/svelte/hello_svelte.js +0 -20
  170. data/lib/install/examples/typescript/hello_typescript.ts +0 -4
  171. data/lib/install/examples/typescript/tsconfig.json +0 -23
  172. data/lib/install/examples/vue/app.vue +0 -22
  173. data/lib/install/examples/vue/hello_vue.js +0 -72
  174. data/lib/install/loaders/coffee.js +0 -6
  175. data/lib/install/loaders/elm.js +0 -25
  176. data/lib/install/loaders/erb.js +0 -11
  177. data/lib/install/loaders/svelte.js +0 -9
  178. data/lib/install/loaders/typescript.js +0 -11
  179. data/lib/install/loaders/vue.js +0 -6
  180. data/lib/install/react.rb +0 -18
  181. data/lib/install/stimulus.rb +0 -12
  182. data/lib/install/svelte.rb +0 -29
  183. data/lib/install/typescript.rb +0 -46
  184. data/lib/install/vue.rb +0 -49
  185. data/lib/tasks/installers.rake +0 -42
  186. data/package/config_types/__tests__/config_list.js +0 -118
  187. data/package/config_types/__tests__/config_object.js +0 -43
  188. data/package/config_types/config_list.js +0 -75
  189. data/package/config_types/config_object.js +0 -55
  190. data/package/config_types/index.js +0 -7
  191. data/package/rules/module.css.js +0 -3
  192. data/package/rules/module.sass.js +0 -8
  193. data/package/rules/node_modules.js +0 -24
  194. data/package/utils/__tests__/deep_assign.js +0 -32
  195. data/package/utils/__tests__/deep_merge.js +0 -10
  196. data/package/utils/__tests__/get_style_rule.js +0 -65
  197. data/package/utils/__tests__/objectify.js +0 -9
  198. data/package/utils/deep_assign.js +0 -22
  199. data/package/utils/deep_merge.js +0 -22
  200. data/package/utils/objectify.js +0 -3
data/config/README.md ADDED
@@ -0,0 +1,3 @@
1
+ # Note
2
+
3
+ This directory exists for Jest specs that execute code expecting the Rails config directory at this path.
@@ -0,0 +1 @@
1
+ ../lib/install/config/webpacker.yml
data/docs/deployment.md CHANGED
@@ -1,28 +1,27 @@
1
1
  # Deployment
2
2
 
3
-
4
3
  Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`.
5
- If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task.
4
+ If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set `NODE_ENV` environment variable to production during deployment or when running the rake task.
6
5
 
7
6
  The `javascript_pack_tag` and `stylesheet_pack_tag` helper method will automatically insert the correct HTML tag for compiled pack. Just like the asset pipeline does it.
8
7
 
9
8
  By default the output will look like this in different environments:
10
9
 
11
10
  ```html
12
- <!-- In development mode with webpack-dev-server -->
13
- <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
14
- <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
15
- <!-- In production or development mode -->
16
- <script src="/packs/calendar-0bd141f6d9360cf4a7f5.js"></script>
17
- <link rel="stylesheet" media="screen" href="/packs/calendar-dc02976b5f94b507e3b6.css">
18
- ```
11
+ <!-- In development mode with webpack-dev-server -->
12
+ <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
13
+ <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
19
14
 
15
+ <!-- In production or development mode -->
16
+ <script src="/packs/js/calendar-0bd141f6d9360cf4a7f5.js"></script>
17
+ <link rel="stylesheet" media="screen" href="/packs/css/calendar-dc02976b5f94b507e3b6.css">
18
+ ```
20
19
 
21
20
  ## Heroku
22
21
 
23
22
  In order for your Webpacker app to run on Heroku, you'll need to do a bit of configuration before hand.
24
23
 
25
- ```
24
+ ```bash
26
25
  heroku create my-webpacker-heroku-app
27
26
  heroku addons:create heroku-postgresql:hobby-dev
28
27
  heroku buildpacks:add heroku/nodejs
@@ -37,7 +36,6 @@ We're essentially doing the following here:
37
36
  * Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby.
38
37
  * Pushing our code to Heroku and kicking off the deployment
39
38
 
40
-
41
39
  ## Nginx
42
40
 
43
41
  Webpacker doesn't serve anything in production. You’re expected to configure your web server to serve files in public/ directly.
@@ -0,0 +1,29 @@
1
+ # Developing Webpacker
2
+
3
+ It's a little trickier for Rails developers to work on the JS code of a project like rails/webpacker. So here are some tips!
4
+
5
+ ## Use some test app
6
+ For example, for React on Rails Changes, I'm using [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
7
+ This directory is the `TEST_APP_DIR`.
8
+
9
+ ## Fork rails/webpacker
10
+ Let's call the rails/webpacker directory `WEBPACKER_DIR` which has rails/webpacker's `package.json`.
11
+
12
+ ## Changing the Package
13
+ ### Setup with Yalc
14
+ Use [`yalc`](https://github.com/wclr/yalc) unless you like yak shaving weird errors.
15
+ 1. In `WEBPACKER_DIR`, run `yalc publish`
16
+ 2. In `TEST_APP_DIR`, run `yalc link @rails/webpacker`
17
+
18
+ ## Update the Package Code
19
+ 1. Make some JS change in WEBPACKER_DIR
20
+ 2. Run `yalc push` and your changes will be pushed to your `TEST_APP_DIR`'s node_modules.
21
+ 3. You may need to run `yarn` in `TEST_APP_DIR` if you added or removed dependencies of rails/webpacker.
22
+
23
+ ## Updating the Ruby Code
24
+
25
+ For the Ruby part, just change the gem reference `TEST_APP_DIR`, like:
26
+
27
+ ```ruby
28
+ gem "webpacker", path: "../../forks/webpacker"
29
+ ```
@@ -4,11 +4,18 @@
4
4
 
5
5
  1. Read the error message carefully. The error message will tell you the precise key value
6
6
  that is not matching what Webpack expects.
7
- 2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug`.
7
+
8
+ 2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
8
9
  If you have a node debugger installed, you'll see the Chrome debugger for your webpack
9
- config. For example, install the Chrome extension [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
10
- set the option for the dev tools to open automatically. For more details on debugging,
11
- see the official [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
10
+ config. For example, install the Chrome extension
11
+ [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
12
+ set the option for the dev tools to open automatically. Or put `chrome://inspect` in the URL bar.
13
+ For more details on debugging, see the official
14
+ [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
15
+
16
+ 3. Any arguments that you add to bin/webpack get sent to webpack. For example, you can pass `--debug` to switch loaders to debug mode. See [webpack CLI debug options](https://webpack.js.org/api/cli/#debug-options) for more information on the available options.
17
+
18
+ 4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-webpacker`
12
19
 
13
20
  ## ENOENT: no such file or directory - node-sass
14
21
 
@@ -52,16 +59,15 @@ completed the compilation successfully before loading a view.
52
59
  * If you get this error while trying to use Elm, try rebuilding Elm. You can do
53
60
  so with a postinstall hook in your `package.json`:
54
61
 
55
- ```
62
+ ```json
56
63
  "scripts": {
57
64
  "postinstall": "npm rebuild elm"
58
65
  }
59
66
  ```
60
67
 
61
-
62
68
  ## webpack or webpack-dev-server not found
63
69
 
64
- * This could happen if `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
70
+ * This could happen if `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
65
71
 
66
72
  * If you encounter the above error on heroku after upgrading from Rails 4.x to 5.1.x, then the problem might be related to missing `yarn` binstub. Please run following commands to update/add binstubs:
67
73
 
@@ -70,7 +76,6 @@ bundle config --delete bin
70
76
  ./bin/rails app:update:bin # or rails app:update:bin
71
77
  ```
72
78
 
73
-
74
79
  ## Running webpack on Windows
75
80
 
76
81
  If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
@@ -82,7 +87,6 @@ C:\path>ruby bin\webpack
82
87
  C:\path>ruby bin\webpack-dev-server
83
88
  ```
84
89
 
85
-
86
90
  ## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
87
91
 
88
92
  If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
@@ -97,6 +101,7 @@ Basic fix involves:
97
101
 
98
102
  ```bash
99
103
  # install sysconfcpus on CI
104
+
100
105
  git clone https://github.com/obmarg/libsysconfcpus.git $HOME/dependencies/libsysconfcpus
101
106
  cd libsysconfcpus
102
107
  .configure --prefix=$HOME/dependencies/sysconfcpus
@@ -109,41 +114,39 @@ chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
109
114
  ```
110
115
 
111
116
  ## Rake assets:precompile fails. ExecJS::RuntimeError
112
- This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
117
+ This error occurs because you are trying to minify by `terser` a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of `ExecJS::RuntimeError` error, you will need to disable uglifier from Rails config:
113
118
 
114
119
  ```ruby
115
- // production.rb
116
- # From
120
+ # In production.rb
117
121
 
122
+ # From
118
123
  Rails.application.config.assets.js_compressor = :uglifier
119
124
 
120
125
  # To
121
-
122
126
  Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
123
-
124
127
  ```
125
128
 
126
129
  ### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
127
130
 
128
- To silent these warnings, please update `config/webpack/environment.js`
129
-
131
+ To silent these warnings, please update `config/webpack/base.js`:
130
132
  ```js
131
- // environment.js
132
133
  const webpack = require('webpack')
133
134
  const { resolve } = require('path')
134
- const { environment, config } = require('@rails/webpacker')
135
-
136
- environment.plugins.append('ContextReplacement',
137
- new webpack.ContextReplacementPlugin(
138
- /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
139
- resolve(config.source_path)
140
- )
141
- )
135
+ const { webpackConfig, merge } = require('@rails/webpacker')
136
+
137
+ module.exports = merge(webpackConfig, {
138
+ plugins: [
139
+ new webpack.ContextReplacementPlugin(
140
+ /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
141
+ resolve(config.source_path)
142
+ )
143
+ ]
144
+ })
142
145
  ```
143
146
 
144
147
  ### Compilation Fails Silently
145
148
 
146
- If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
149
+ If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the `webpack_compile_output` configuration variable to `true` in webpacker.yml may add some helpful error information to your log file (Rails `log/development.log` or `log/production.log`)
147
150
 
148
151
  ```yml
149
152
  # webpacker.yml
@@ -154,3 +157,38 @@ default: &default
154
157
  public_output_path: complaints_packs
155
158
  webpack_compile_output: true
156
159
  ```
160
+
161
+ ### Using global variables for dependencies
162
+
163
+ 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).
164
+
165
+ 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.
166
+
167
+ Thus ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader manages runtime dependencies to global symbols.
168
+
169
+ **You don't need to assign dependencies on `window`.**
170
+
171
+ For instance, with [jQuery](https://jquery.com/):
172
+ ```diff
173
+ // app/packs/entrypoints/application.js
174
+
175
+ - import jQuery from 'jquery'
176
+ - window.jQuery = jQuery
177
+ ```
178
+
179
+ Instead do:
180
+ ```js
181
+ // config/webpack/base.js
182
+
183
+ const webpack = require('webpack')
184
+ const { webpackConfig, merge } = require('@rails/webpacker')
185
+
186
+ module.exports = merge(webpackConfig, {
187
+ plugins: [
188
+ new webpack.ProvidePlugin({
189
+ $: 'jquery',
190
+ jQuery: 'jquery',
191
+ })
192
+ ],
193
+ })
194
+ ```
@@ -0,0 +1,113 @@
1
+ # Upgrading from Webpacker 5 to 6
2
+
3
+ There are several substantial changes in Webpacker 6 that you need to manually account for when coming from Webpacker 5. This guide will help you through it.
4
+
5
+ ## Webpacker has become a slimmer wrapper around Webpack
6
+
7
+ 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/rails/webpacker#integrations) for more information.
8
+
9
+ Webpacker used to configure Webpack indirectly, which lead to a [complicated secondary configuration process](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack.md). This was done in order to provide default configurations for the most popular frameworks, but ended up creating more complexity than it cured. So now Webpacker delegates all configuration directly to Webpack's default configuration setup.
10
+
11
+ 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).
12
+
13
+ ## How to upgrade to Webpacker v6 from v5
14
+
15
+ 1. If you are changing from the v5 default for `source_entry_path`:
16
+ ```yml
17
+ source_path: app/javascript
18
+ source_entry_path: packs
19
+ ```
20
+ to the v6 default:
21
+ ```yml
22
+ source_path: app/javascript
23
+ source_entry_path: /
24
+ ```
25
+ Then move your `app/javascript/packs/*` (including `application.js`) to `app/javascript/`.
26
+
27
+ 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.
28
+
29
+ 2. Rename `config/webpack` to `config/webpack_old`
30
+
31
+ 3. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
32
+
33
+ 4. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
34
+
35
+ 5. Upgrade the Webpacker Ruby gem and NPM package
36
+
37
+ 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.)
38
+
39
+ Example going to a specific version:
40
+
41
+ ```ruby
42
+ # Gemfile
43
+ gem 'webpacker', '6.0.0.rc.5'
44
+ ```
45
+
46
+ ```bash
47
+ bundle install
48
+ ```
49
+
50
+ ```bash
51
+ yarn add @rails/webpacker@6.0.0-rc.5 --exact
52
+ ```
53
+
54
+ ```bash
55
+ bundle exec rails webpacker:install
56
+ ```
57
+
58
+ 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`.
59
+
60
+ 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.
61
+
62
+ 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`.
63
+
64
+ ```js
65
+ // config/webpack/base.js
66
+ const { webpackConfig, merge } = require('@rails/webpacker')
67
+ const customConfig = require('./custom')
68
+
69
+ module.exports = merge(webpackConfig, customConfig)
70
+ ```
71
+
72
+ 9. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
73
+
74
+ 10. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
75
+
76
+ ```json
77
+ "babel": {
78
+ "presets": [
79
+ "./node_modules/@rails/webpacker/package/babel/preset.js"
80
+ ]
81
+ }
82
+ ```
83
+
84
+ 11. Remove `postcss.config.js` if you don't use `PostCSS`.
85
+
86
+ 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)
87
+
88
+ ```js
89
+ {
90
+ resolve: {
91
+ extensions: ['.ts', '.tsx', '.vue', '.css']
92
+ }
93
+ }
94
+ ```
95
+
96
+ 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.
97
+
98
+ 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.
99
+
100
+ 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.
101
+
102
+ 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`.
103
+
104
+ 17. Make sure that you can run `bin/webpack` without errors.
105
+
106
+ 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`.
107
+
108
+ 19. Try your app!
109
+
110
+ ## Examples of v5 to v6
111
+
112
+ 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)
113
+ 2. [Vue and Sass Example](https://github.com/guillaumebriday/upgrade-webpacker-5-to-6)
@@ -4,7 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
4
4
 
5
5
  gemspec path: "../"
6
6
 
7
- gem "rails", github: "rails/rails"
7
+ gem "rails", github: "rails/rails", branch: "main"
8
8
  gem "arel", github: "rails/arel"
9
9
  gem "rake", ">= 11.1"
10
10
  gem "rack-proxy", require: false
@@ -1,8 +1,11 @@
1
1
  source "https://rubygems.org"
2
2
 
3
+ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
4
+
3
5
  gemspec path: "../"
4
6
 
5
- gem "rails", "~> 4.2.0"
7
+ gem "rails", '~>6.1.0'
8
+ gem "arel", github: "rails/arel"
6
9
  gem "rake", ">= 11.1"
7
10
  gem "rack-proxy", require: false
8
11
  gem "minitest", "~> 5.0"
@@ -7,12 +7,9 @@
7
7
  // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
8
8
  // layout file, like app/views/layouts/application.html.erb
9
9
 
10
-
11
- // Uncomment to copy all static images under ../images to the output folder and reference
10
+ // Uncomment to copy all static images under ./images to the output folder and reference
12
11
  // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
13
12
  // or the `imagePath` JavaScript helper below.
14
13
  //
15
- // const images = require.context('../images', true)
14
+ // const images = require.context('./images', true)
16
15
  // const imagePath = (name) => images(name, true)
17
-
18
- console.log('Hello World from Webpacker')
@@ -1,17 +1,14 @@
1
1
  #!/usr/bin/env ruby
2
2
 
3
- ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
4
- ENV["NODE_ENV"] ||= "development"
5
-
6
3
  require "pathname"
7
- ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
8
- Pathname.new(__FILE__).realpath)
9
-
10
4
  require "bundler/setup"
11
-
12
5
  require "webpacker"
13
6
  require "webpacker/webpack_runner"
14
7
 
8
+ ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
9
+ ENV["NODE_ENV"] ||= "development"
10
+ ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
11
+
15
12
  APP_ROOT = File.expand_path("..", __dir__)
16
13
  Dir.chdir(APP_ROOT) do
17
14
  Webpacker::WebpackRunner.run(ARGV)
@@ -0,0 +1,18 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ APP_ROOT = File.expand_path("..", __dir__)
4
+ Dir.chdir(APP_ROOT) do
5
+ yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
6
+ select { |dir| File.expand_path(dir) != __dir__ }.
7
+ product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
8
+ map { |dir, file| File.expand_path(file, dir) }.
9
+ find { |file| File.executable?(file) }
10
+
11
+ if yarn
12
+ exec yarn, *ARGV
13
+ else
14
+ $stderr.puts "Yarn executable was not detected in the system."
15
+ $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
16
+ exit 1
17
+ end
18
+ end
@@ -0,0 +1,3 @@
1
+ const { webpackConfig } = require('@rails/webpacker')
2
+
3
+ module.exports = webpackConfig
@@ -1,5 +1,5 @@
1
1
  process.env.NODE_ENV = process.env.NODE_ENV || 'development'
2
2
 
3
- const environment = require('./environment')
3
+ const webpackConfig = require('./base')
4
4
 
5
- module.exports = environment.toWebpackConfig()
5
+ module.exports = webpackConfig
@@ -1,5 +1,5 @@
1
1
  process.env.NODE_ENV = process.env.NODE_ENV || 'production'
2
2
 
3
- const environment = require('./environment')
3
+ const webpackConfig = require('./base')
4
4
 
5
- module.exports = environment.toWebpackConfig()
5
+ module.exports = webpackConfig
@@ -1,5 +1,5 @@
1
1
  process.env.NODE_ENV = process.env.NODE_ENV || 'development'
2
2
 
3
- const environment = require('./environment')
3
+ const webpackConfig = require('./base')
4
4
 
5
- module.exports = environment.toWebpackConfig()
5
+ module.exports = webpackConfig
@@ -2,79 +2,50 @@
2
2
 
3
3
  default: &default
4
4
  source_path: app/javascript
5
- source_entry_path: packs
5
+ source_entry_path: /
6
6
  public_root_path: public
7
7
  public_output_path: packs
8
- cache_path: tmp/cache/webpacker
9
- check_yarn_integrity: false
8
+ cache_path: tmp/webpacker
10
9
  webpack_compile_output: true
11
10
 
12
- # Additional paths webpack should lookup modules
11
+ # Additional paths webpack should look up modules
13
12
  # ['app/assets', 'engine/foo/app/assets']
14
- resolved_paths: []
13
+ additional_paths: []
15
14
 
16
15
  # Reload manifest.json on all requests so we reload latest compiled packs
17
16
  cache_manifest: false
18
17
 
19
- # Extract and emit a css file
20
- extract_css: false
21
-
22
- static_assets_extensions:
23
- - .jpg
24
- - .jpeg
25
- - .png
26
- - .gif
27
- - .tiff
28
- - .ico
29
- - .svg
30
- - .eot
31
- - .otf
32
- - .ttf
33
- - .woff
34
- - .woff2
35
-
36
- extensions:
37
- - .mjs
38
- - .js
39
- - .sass
40
- - .scss
41
- - .css
42
- - .module.sass
43
- - .module.scss
44
- - .module.css
45
- - .png
46
- - .svg
47
- - .gif
48
- - .jpeg
49
- - .jpg
50
-
51
18
  development:
52
19
  <<: *default
53
20
  compile: true
54
21
 
55
- # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
56
- check_yarn_integrity: true
57
-
58
22
  # Reference: https://webpack.js.org/configuration/dev-server/
59
23
  dev_server:
60
24
  https: false
61
25
  host: localhost
62
26
  port: 3035
63
- public: localhost:3035
27
+ # Hot Module Replacement updates modules while the application is running without a full reload
64
28
  hmr: false
65
- # Inline should be set to true if using HMR
66
- inline: true
67
- overlay: true
29
+ # Defaults to the inverse of hmr. Uncomment to manually set this.
30
+ # live_reload: true
31
+ client:
32
+ # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
33
+ overlay: true
34
+ # May also be a string
35
+ # webSocketURL:
36
+ # hostname: "0.0.0.0"
37
+ # pathname: "/ws"
38
+ # port: 8080
39
+ # Should we use gzip compression?
68
40
  compress: true
69
- disable_host_check: true
70
- use_local_ip: false
71
- quiet: false
72
- pretty: false
41
+ # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
42
+ allowed_hosts: "all"
43
+ pretty: true
73
44
  headers:
74
45
  'Access-Control-Allow-Origin': '*'
75
- watch_options:
76
- ignored: '**/node_modules/**'
77
-
46
+ static:
47
+ watch:
48
+ ignored: '**/node_modules/**'
78
49
 
79
50
  test:
80
51
  <<: *default
@@ -89,8 +60,5 @@ production:
89
60
  # Production depends on precompilation of packs prior to booting for performance.
90
61
  compile: false
91
62
 
92
- # Extract and emit a css file
93
- extract_css: true
94
-
95
63
  # Cache manifest.json for performance
96
64
  cache_manifest: true
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "app",
3
+ "private": true,
4
+ "dependencies": {
5
+ },
6
+ "version": "0.1.0",
7
+ "babel": {
8
+ "presets": [
9
+ "./node_modules/@rails/webpacker/package/babel/preset.js"
10
+ ]
11
+ },
12
+ "browserslist": [
13
+ "defaults"
14
+ ]
15
+ }