webpacker 4.3.0 → 5.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (84) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +38 -0
  4. data/.github/workflows/js-lint.yml +39 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +66 -0
  7. data/.node-version +1 -1
  8. data/.rubocop.yml +113 -13
  9. data/.travis.yml +8 -22
  10. data/CHANGELOG.md +52 -2
  11. data/Gemfile +1 -0
  12. data/Gemfile.lock +116 -104
  13. data/README.md +59 -295
  14. data/docs/css.md +61 -7
  15. data/docs/deployment.md +2 -2
  16. data/docs/docker.md +17 -17
  17. data/docs/engines.md +13 -0
  18. data/docs/env.md +0 -2
  19. data/docs/integrations.md +220 -0
  20. data/docs/target.md +22 -0
  21. data/docs/testing.md +2 -3
  22. data/docs/troubleshooting.md +3 -1
  23. data/docs/typescript.md +92 -28
  24. data/docs/webpack-dev-server.md +1 -1
  25. data/lib/install/config/babel.config.js +1 -3
  26. data/lib/install/config/webpacker.yml +1 -5
  27. data/lib/install/examples/react/tsconfig.json +2 -1
  28. data/lib/install/examples/typescript/tsconfig.json +2 -1
  29. data/lib/install/loaders/svelte.js +2 -2
  30. data/lib/install/template.rb +10 -2
  31. data/lib/install/typescript.rb +6 -13
  32. data/lib/tasks/webpacker/check_node.rake +15 -8
  33. data/lib/tasks/webpacker/check_yarn.rake +16 -10
  34. data/lib/tasks/webpacker/clean.rake +12 -6
  35. data/lib/tasks/webpacker/clobber.rake +8 -4
  36. data/lib/tasks/webpacker/yarn_install.rake +11 -16
  37. data/lib/webpacker/commands.rb +33 -9
  38. data/lib/webpacker/compiler.rb +9 -5
  39. data/lib/webpacker/configuration.rb +28 -13
  40. data/lib/webpacker/dev_server_proxy.rb +3 -1
  41. data/lib/webpacker/dev_server_runner.rb +6 -6
  42. data/lib/webpacker/env.rb +5 -1
  43. data/lib/webpacker/helper.rb +37 -18
  44. data/lib/webpacker/manifest.rb +4 -4
  45. data/lib/webpacker/railtie.rb +0 -43
  46. data/lib/webpacker/runner.rb +1 -0
  47. data/lib/webpacker/version.rb +1 -1
  48. data/lib/webpacker/webpack_runner.rb +2 -2
  49. data/package.json +41 -41
  50. data/package/__tests__/config.js +12 -1
  51. data/package/__tests__/dev_server.js +2 -0
  52. data/package/__tests__/development.js +14 -1
  53. data/package/config.js +4 -1
  54. data/package/configPath.js +3 -0
  55. data/package/dev_server.js +1 -1
  56. data/package/env.js +1 -2
  57. data/package/environments/__tests__/base.js +29 -2
  58. data/package/environments/base.js +17 -7
  59. data/package/environments/development.js +39 -37
  60. data/package/environments/production.js +1 -3
  61. data/package/rules/babel.js +12 -5
  62. data/package/rules/file.js +3 -2
  63. data/package/rules/node_modules.js +1 -3
  64. data/package/rules/sass.js +10 -1
  65. data/package/utils/helpers.js +1 -1
  66. data/test/compiler_test.rb +8 -3
  67. data/test/configuration_test.rb +8 -7
  68. data/test/dev_server_runner_test.rb +1 -1
  69. data/test/helper_test.rb +3 -0
  70. data/test/manifest_test.rb +37 -6
  71. data/test/rake_tasks_test.rb +11 -0
  72. data/test/test_app/app/javascript/packs/multi_entry.css +4 -0
  73. data/test/test_app/app/javascript/packs/multi_entry.js +4 -0
  74. data/test/test_app/config/application.rb +0 -1
  75. data/test/test_app/config/webpacker.yml +7 -1
  76. data/test/test_app/public/packs/manifest.json +1 -0
  77. data/test/webpack_runner_test.rb +1 -1
  78. data/webpacker.gemspec +5 -4
  79. data/yarn.lock +4237 -3407
  80. metadata +43 -22
  81. data/gemfiles/Gemfile-rails.4.2.x +0 -9
  82. data/gemfiles/Gemfile-rails.5.0.x +0 -9
  83. data/gemfiles/Gemfile-rails.5.1.x +0 -9
  84. data/lib/install/loaders/typescript.js +0 -11
data/CHANGELOG.md CHANGED
@@ -2,9 +2,59 @@
2
2
 
3
3
  **Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
4
4
 
5
- ## [[4.3.0]](https://github.com/rails/webpacker/compare/v4.2.2...v4.3.0) - 2019-08-16
5
+ ## [[5.4.0]](https://github.com/rails/webpacker/compare/v5.4.0...5.3.0) - 2021-05-18
6
6
 
7
- - Bump dependencies
7
+ - Fix compatibility with Psych 4
8
+
9
+ ## [[5.3.0]](https://github.com/rails/webpacker/compare/v5.3.0...5.2.1) - 2021-04-27
10
+
11
+ - Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
12
+
13
+ - Keep backups, even when they're old [#2912](https://github.com/rails/webpacker/pull/2912)
14
+
15
+ ## [[5.2.2]](https://github.com/rails/webpacker/compare/v5.2.1...5.2.2) - 2021-04-27
16
+
17
+ - Bump deps and remove node-sass [#2997](https://github.com/rails/webpacker/pull/2997).
18
+
19
+ ## [[5.2.1]](https://github.com/rails/webpacker/compare/v5.2.0...5.2.1) - 2020-08-17
20
+
21
+ - Revert [#1311](https://github.com/rails/webpacker/pull/1311).
22
+
23
+ ## [[5.2.0]](https://github.com/rails/webpacker/compare/v5.1.1...5.2.0) - 2020-08-16
24
+
25
+ - Bump dependencies and fixes. See [diff](https://github.com/rails/webpacker/compare/v5.1.1...5-x-stable) for changes.
26
+
27
+ ## [[5.1.1]](https://github.com/rails/webpacker/compare/v5.1.0...v5.1.1) - 2020-04-20
28
+
29
+ - Update [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) and installer to use babel-loader for typescript.[(#2541](https://github.com/rails/webpacker/pull/2541)
30
+
31
+ ## [[5.1.0]](https://github.com/rails/webpacker/compare/v5.0.1...v5.1.0) - 2020-04-19
32
+
33
+ - Remove yarn integrity check [#2518](https://github.com/rails/webpacker/pull/2518)
34
+ - Switch from ts-loader to babel-loader [#2449](https://github.com/rails/webpacker/pull/2449)
35
+ Please see the [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) to upgrade existing projects to use typescript with 5.1
36
+ - Resolve multi-word snakecase WEBPACKER_DEV_SERVER env values [#2528](https://github.com/rails/webpacker/pull/2528)
37
+
38
+ ## [[5.0.1]](https://github.com/rails/webpacker/compare/v5.0.0...v5.0.1) - 2020-03-22
39
+
40
+ - Upgrade deps and fix sass loader config options bug [#2508](https://github.com/rails/webpacker/pull/2508)
41
+
42
+ ## [[5.0.0]](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0) - 2020-03-22
43
+
44
+ - Bump minimum node version [#2428](https://github.com/rails/webpacker/pull/2428)
45
+ - Bump minimum ruby/rails version [#2415](https://github.com/rails/webpacker/pull/2415)
46
+ - Add support for multiple files per entry [#2476](https://github.com/rails/webpacker/pull/2476)
47
+
48
+ ```js
49
+ entry: {
50
+ home: ['./home.js', './home.scss'],
51
+ account: ['./account.js', './account.scss']
52
+ }
53
+ ```
54
+
55
+ You can now have two entry files with same names inside packs folder, `home.scss` and `home.js`
56
+
57
+ And, other minor fixes, please see a list of changes [here](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0)
8
58
 
9
59
  ## [[4.2.2]](https://github.com/rails/webpacker/compare/v4.2.1...v4.2.2) - 2019-12-09
10
60
 
data/Gemfile CHANGED
@@ -5,6 +5,7 @@ gemspec
5
5
  gem "rails"
6
6
  gem "rake", ">= 11.1"
7
7
  gem "rack-proxy", require: false
8
+ gem "semantic_range", require: false
8
9
 
9
10
  group :test do
10
11
  gem "minitest", "~> 5.0"
data/Gemfile.lock CHANGED
@@ -1,157 +1,168 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- webpacker (4.3.0)
5
- activesupport (>= 4.2)
4
+ webpacker (5.4.0)
5
+ activesupport (>= 5.2)
6
6
  rack-proxy (>= 0.6.1)
7
- railties (>= 4.2)
7
+ railties (>= 5.2)
8
+ semantic_range (>= 2.3.0)
8
9
 
9
10
  GEM
10
11
  remote: https://rubygems.org/
11
12
  specs:
12
- actioncable (6.0.1)
13
- actionpack (= 6.0.1)
13
+ actioncable (6.1.3.2)
14
+ actionpack (= 6.1.3.2)
15
+ activesupport (= 6.1.3.2)
14
16
  nio4r (~> 2.0)
15
17
  websocket-driver (>= 0.6.1)
16
- actionmailbox (6.0.1)
17
- actionpack (= 6.0.1)
18
- activejob (= 6.0.1)
19
- activerecord (= 6.0.1)
20
- activestorage (= 6.0.1)
21
- activesupport (= 6.0.1)
18
+ actionmailbox (6.1.3.2)
19
+ actionpack (= 6.1.3.2)
20
+ activejob (= 6.1.3.2)
21
+ activerecord (= 6.1.3.2)
22
+ activestorage (= 6.1.3.2)
23
+ activesupport (= 6.1.3.2)
22
24
  mail (>= 2.7.1)
23
- actionmailer (6.0.1)
24
- actionpack (= 6.0.1)
25
- actionview (= 6.0.1)
26
- activejob (= 6.0.1)
25
+ actionmailer (6.1.3.2)
26
+ actionpack (= 6.1.3.2)
27
+ actionview (= 6.1.3.2)
28
+ activejob (= 6.1.3.2)
29
+ activesupport (= 6.1.3.2)
27
30
  mail (~> 2.5, >= 2.5.4)
28
31
  rails-dom-testing (~> 2.0)
29
- actionpack (6.0.1)
30
- actionview (= 6.0.1)
31
- activesupport (= 6.0.1)
32
- rack (~> 2.0)
32
+ actionpack (6.1.3.2)
33
+ actionview (= 6.1.3.2)
34
+ activesupport (= 6.1.3.2)
35
+ rack (~> 2.0, >= 2.0.9)
33
36
  rack-test (>= 0.6.3)
34
37
  rails-dom-testing (~> 2.0)
35
38
  rails-html-sanitizer (~> 1.0, >= 1.2.0)
36
- actiontext (6.0.1)
37
- actionpack (= 6.0.1)
38
- activerecord (= 6.0.1)
39
- activestorage (= 6.0.1)
40
- activesupport (= 6.0.1)
39
+ actiontext (6.1.3.2)
40
+ actionpack (= 6.1.3.2)
41
+ activerecord (= 6.1.3.2)
42
+ activestorage (= 6.1.3.2)
43
+ activesupport (= 6.1.3.2)
41
44
  nokogiri (>= 1.8.5)
42
- actionview (6.0.1)
43
- activesupport (= 6.0.1)
45
+ actionview (6.1.3.2)
46
+ activesupport (= 6.1.3.2)
44
47
  builder (~> 3.1)
45
48
  erubi (~> 1.4)
46
49
  rails-dom-testing (~> 2.0)
47
50
  rails-html-sanitizer (~> 1.1, >= 1.2.0)
48
- activejob (6.0.1)
49
- activesupport (= 6.0.1)
51
+ activejob (6.1.3.2)
52
+ activesupport (= 6.1.3.2)
50
53
  globalid (>= 0.3.6)
51
- activemodel (6.0.1)
52
- activesupport (= 6.0.1)
53
- activerecord (6.0.1)
54
- activemodel (= 6.0.1)
55
- activesupport (= 6.0.1)
56
- activestorage (6.0.1)
57
- actionpack (= 6.0.1)
58
- activejob (= 6.0.1)
59
- activerecord (= 6.0.1)
60
- marcel (~> 0.3.1)
61
- activesupport (6.0.1)
54
+ activemodel (6.1.3.2)
55
+ activesupport (= 6.1.3.2)
56
+ activerecord (6.1.3.2)
57
+ activemodel (= 6.1.3.2)
58
+ activesupport (= 6.1.3.2)
59
+ activestorage (6.1.3.2)
60
+ actionpack (= 6.1.3.2)
61
+ activejob (= 6.1.3.2)
62
+ activerecord (= 6.1.3.2)
63
+ activesupport (= 6.1.3.2)
64
+ marcel (~> 1.0.0)
65
+ mini_mime (~> 1.0.2)
66
+ activesupport (6.1.3.2)
62
67
  concurrent-ruby (~> 1.0, >= 1.0.2)
63
- i18n (>= 0.7, < 2)
64
- minitest (~> 5.1)
65
- tzinfo (~> 1.1)
66
- zeitwerk (~> 2.2)
67
- ast (2.4.0)
68
- builder (3.2.3)
69
- byebug (11.0.1)
70
- concurrent-ruby (1.1.5)
71
- crass (1.0.5)
72
- erubi (1.9.0)
68
+ i18n (>= 1.6, < 2)
69
+ minitest (>= 5.1)
70
+ tzinfo (~> 2.0)
71
+ zeitwerk (~> 2.3)
72
+ ast (2.4.2)
73
+ builder (3.2.4)
74
+ byebug (11.1.3)
75
+ concurrent-ruby (1.1.8)
76
+ crass (1.0.6)
77
+ erubi (1.10.0)
73
78
  globalid (0.4.2)
74
79
  activesupport (>= 4.2.0)
75
- i18n (1.7.0)
80
+ i18n (1.8.10)
76
81
  concurrent-ruby (~> 1.0)
77
- jaro_winkler (1.5.4)
78
- loofah (2.3.1)
82
+ loofah (2.9.1)
79
83
  crass (~> 1.0.2)
80
84
  nokogiri (>= 1.5.9)
81
85
  mail (2.7.1)
82
86
  mini_mime (>= 0.1.1)
83
- marcel (0.3.3)
84
- mimemagic (~> 0.3.2)
85
- method_source (0.9.2)
86
- mimemagic (0.3.3)
87
- mini_mime (1.0.2)
88
- mini_portile2 (2.4.0)
89
- minitest (5.13.0)
90
- nio4r (2.5.2)
91
- nokogiri (1.10.5)
92
- mini_portile2 (~> 2.4.0)
93
- parallel (1.18.0)
94
- parser (2.6.5.0)
95
- ast (~> 2.4.0)
96
- rack (2.0.7)
87
+ marcel (1.0.1)
88
+ method_source (1.0.0)
89
+ mini_mime (1.0.3)
90
+ mini_portile2 (2.5.1)
91
+ minitest (5.14.4)
92
+ nio4r (2.5.7)
93
+ nokogiri (1.11.4)
94
+ mini_portile2 (~> 2.5.0)
95
+ racc (~> 1.4)
96
+ parallel (1.20.1)
97
+ parser (3.0.1.1)
98
+ ast (~> 2.4.1)
99
+ racc (1.5.2)
100
+ rack (2.2.3)
97
101
  rack-proxy (0.6.5)
98
102
  rack
99
103
  rack-test (1.1.0)
100
104
  rack (>= 1.0, < 3)
101
- rails (6.0.1)
102
- actioncable (= 6.0.1)
103
- actionmailbox (= 6.0.1)
104
- actionmailer (= 6.0.1)
105
- actionpack (= 6.0.1)
106
- actiontext (= 6.0.1)
107
- actionview (= 6.0.1)
108
- activejob (= 6.0.1)
109
- activemodel (= 6.0.1)
110
- activerecord (= 6.0.1)
111
- activestorage (= 6.0.1)
112
- activesupport (= 6.0.1)
113
- bundler (>= 1.3.0)
114
- railties (= 6.0.1)
105
+ rails (6.1.3.2)
106
+ actioncable (= 6.1.3.2)
107
+ actionmailbox (= 6.1.3.2)
108
+ actionmailer (= 6.1.3.2)
109
+ actionpack (= 6.1.3.2)
110
+ actiontext (= 6.1.3.2)
111
+ actionview (= 6.1.3.2)
112
+ activejob (= 6.1.3.2)
113
+ activemodel (= 6.1.3.2)
114
+ activerecord (= 6.1.3.2)
115
+ activestorage (= 6.1.3.2)
116
+ activesupport (= 6.1.3.2)
117
+ bundler (>= 1.15.0)
118
+ railties (= 6.1.3.2)
115
119
  sprockets-rails (>= 2.0.0)
116
120
  rails-dom-testing (2.0.3)
117
121
  activesupport (>= 4.2.0)
118
122
  nokogiri (>= 1.6)
119
123
  rails-html-sanitizer (1.3.0)
120
124
  loofah (~> 2.3)
121
- railties (6.0.1)
122
- actionpack (= 6.0.1)
123
- activesupport (= 6.0.1)
125
+ railties (6.1.3.2)
126
+ actionpack (= 6.1.3.2)
127
+ activesupport (= 6.1.3.2)
124
128
  method_source
125
129
  rake (>= 0.8.7)
126
- thor (>= 0.20.3, < 2.0)
130
+ thor (~> 1.0)
127
131
  rainbow (3.0.0)
128
- rake (13.0.0)
129
- rubocop (0.68.1)
130
- jaro_winkler (~> 1.5.1)
132
+ rake (13.0.3)
133
+ regexp_parser (2.1.1)
134
+ rexml (3.2.5)
135
+ rubocop (0.93.1)
131
136
  parallel (~> 1.10)
132
- parser (>= 2.5, != 2.5.1.1)
137
+ parser (>= 2.7.1.5)
133
138
  rainbow (>= 2.2.2, < 4.0)
139
+ regexp_parser (>= 1.8)
140
+ rexml
141
+ rubocop-ast (>= 0.6.0)
134
142
  ruby-progressbar (~> 1.7)
135
- unicode-display_width (>= 1.4.0, < 1.6)
136
- rubocop-performance (1.3.0)
137
- rubocop (>= 0.68.0)
138
- ruby-progressbar (1.10.1)
139
- sprockets (4.0.0)
143
+ unicode-display_width (>= 1.4.0, < 2.0)
144
+ rubocop-ast (1.5.0)
145
+ parser (>= 3.0.1.1)
146
+ rubocop-performance (1.10.2)
147
+ rubocop (>= 0.90.0, < 2.0)
148
+ rubocop-ast (>= 0.4.0)
149
+ ruby-progressbar (1.11.0)
150
+ semantic_range (3.0.0)
151
+ sprockets (4.0.2)
140
152
  concurrent-ruby (~> 1.0)
141
153
  rack (> 1, < 3)
142
- sprockets-rails (3.2.1)
154
+ sprockets-rails (3.2.2)
143
155
  actionpack (>= 4.0)
144
156
  activesupport (>= 4.0)
145
157
  sprockets (>= 3.0.0)
146
- thor (0.20.3)
147
- thread_safe (0.3.6)
148
- tzinfo (1.2.5)
149
- thread_safe (~> 0.1)
150
- unicode-display_width (1.5.0)
151
- websocket-driver (0.7.1)
158
+ thor (1.1.0)
159
+ tzinfo (2.0.4)
160
+ concurrent-ruby (~> 1.0)
161
+ unicode-display_width (1.7.0)
162
+ websocket-driver (0.7.3)
152
163
  websocket-extensions (>= 0.1.0)
153
- websocket-extensions (0.1.4)
154
- zeitwerk (2.2.1)
164
+ websocket-extensions (0.1.5)
165
+ zeitwerk (2.4.2)
155
166
 
156
167
  PLATFORMS
157
168
  ruby
@@ -163,9 +174,10 @@ DEPENDENCIES
163
174
  rack-proxy
164
175
  rails
165
176
  rake (>= 11.1)
166
- rubocop (< 0.69)
177
+ rubocop (= 0.93.1)
167
178
  rubocop-performance
179
+ semantic_range
168
180
  webpacker!
169
181
 
170
182
  BUNDLED WITH
171
- 1.17.3
183
+ 2.2.3
data/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Webpacker
2
2
 
3
3
  [![Build Status](https://travis-ci.org/rails/webpacker.svg?branch=master)](https://travis-ci.org/rails/webpacker)
4
- [![node.js](https://img.shields.io/badge/node-%3E%3D%208.16.0-brightgreen.svg)](https://nodejs.org/en/)
5
- [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://github.com/rails/webpacker)
4
+ [![node.js](https://img.shields.io/badge/node-%3E%3D%2010.17.0-brightgreen.svg)](https://www.npmjs.com/package/@rails/webpacker)
5
+ [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://rubygems.org/gems/webpacker)
6
6
 
7
7
  Webpacker makes it easy to use the JavaScript pre-processor and bundler
8
8
  [webpack 4.x.x+](https://webpack.js.org/)
@@ -13,10 +13,11 @@ even JavaScript Sprinkles (that all continues to live in app/assets).
13
13
  However, it is possible to use Webpacker for CSS, images and fonts assets as well,
14
14
  in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.
15
15
 
16
- **NOTE:** The master branch now hosts the code for v4.x.x. Please refer to [3-x-stable](https://github.com/rails/webpacker/tree/3-x-stable) branch for 3.x documentation. See the [v4-upgrade guide](docs/v4-upgrade.md) for an overview of the changes.
16
+ **NOTE:** The master branch now hosts the code for v5.x.x. Please refer to [4-x-stable](https://github.com/rails/webpacker/tree/4-x-stable) branch for 4.x documentation.
17
17
 
18
18
  <!-- START doctoc generated TOC please keep comment here to allow auto update -->
19
19
  <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
20
+
20
21
  ## Table of Contents
21
22
 
22
23
  - [Prerequisites](#prerequisites)
@@ -27,16 +28,16 @@ in which case you may not even need the asset pipeline. This is mostly relevant
27
28
  - [Webpack Configuration](#webpack-configuration)
28
29
  - [Custom Rails environments](#custom-rails-environments)
29
30
  - [Upgrading](#upgrading)
30
- - [Yarn Integrity](#yarn-integrity)
31
31
  - [Integrations](#integrations)
32
- - [React](#react)
33
- - [Angular with TypeScript](#angular-with-typescript)
34
- - [Vue](#vue)
35
- - [Elm](#elm)
36
- - [Stimulus](#stimulus)
37
- - [Svelte](#svelte)
38
- - [CoffeeScript](#coffeescript)
39
- - [Erb](#erb)
32
+ - [React](./docs/integrations.md#react)
33
+ - [Angular with TypeScript](./docs/integrations.md#angular-with-typescript)
34
+ - [Vue](./docs/integrations.md#vue)
35
+ - [Elm](./docs/integrations.md#elm)
36
+ - [Stimulus](./docs/integrations.md#stimulus)
37
+ - [Svelte](./docs/integrations.md#svelte)
38
+ - [Typescript](./docs/typescript.md)
39
+ - [CoffeeScript](./docs/integrations.md#coffeescript)
40
+ - [Erb](./docs/integrations.md#erb)
40
41
  - [Paths](#paths)
41
42
  - [Resolved](#resolved)
42
43
  - [Watched](#watched)
@@ -47,29 +48,26 @@ in which case you may not even need the asset pipeline. This is mostly relevant
47
48
 
48
49
  <!-- END doctoc generated TOC please keep comment here to allow auto update -->
49
50
 
50
-
51
51
  ## Prerequisites
52
52
 
53
- * Ruby 2.2+
54
- * Rails 4.2+
55
- * Node.js 8.16.0+
56
- * Yarn 1.x+
57
-
53
+ - Ruby 2.4+
54
+ - Rails 5.2+
55
+ - Node.js 10.17.0+
56
+ - Yarn 1.x+
58
57
 
59
58
  ## Features
60
59
 
61
- * [webpack 4.x.x](https://webpack.js.org/)
62
- * ES6 with [babel](https://babeljs.io/)
63
- * Automatic code splitting using multiple entry points
64
- * Stylesheets - Sass and CSS
65
- * Images and fonts
66
- * PostCSS - Auto-Prefixer
67
- * Asset compression, source-maps, and minification
68
- * CDN support
69
- * React, Angular, Elm and Vue support out-of-the-box
70
- * Rails view helpers
71
- * Extensible and configurable
72
-
60
+ - [webpack 4.x.x](https://webpack.js.org/)
61
+ - ES6 with [babel](https://babeljs.io/)
62
+ - Automatic code splitting using multiple entry points
63
+ - Stylesheets - Sass and CSS
64
+ - Images and fonts
65
+ - PostCSS - Auto-Prefixer
66
+ - Asset compression, source-maps, and minification
67
+ - CDN support
68
+ - React, Angular, Elm and Vue support out-of-the-box
69
+ - Rails view helpers
70
+ - Extensible and configurable
73
71
 
74
72
  ## Installation
75
73
 
@@ -85,7 +83,7 @@ Or add it to your `Gemfile`:
85
83
 
86
84
  ```ruby
87
85
  # Gemfile
88
- gem 'webpacker', '~> 4.x'
86
+ gem 'webpacker', '~> 5.x'
89
87
 
90
88
  # OR if you prefer to use master
91
89
  gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
@@ -109,6 +107,12 @@ Optional: To fix ["unmet peer dependency" warnings](https://github.com/rails/web
109
107
  yarn upgrade
110
108
  ```
111
109
 
110
+ When `package.json` and/or `yarn.lock` changes, such as when pulling down changes to your local environment in a team settings, be sure to keep your NPM packages up-to-date:
111
+
112
+ ```bash
113
+ yarn install
114
+ ```
115
+
112
116
  ### Usage
113
117
 
114
118
  Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
@@ -118,8 +122,11 @@ app/javascript:
118
122
  ├── packs:
119
123
  │ # only webpack entry files here
120
124
  │ └── application.js
121
- └── src:
122
125
  │ └── application.css
126
+ └── src:
127
+ │ └── my_component.js
128
+ └── stylesheets:
129
+ │ └── my_styles.css
123
130
  └── images:
124
131
  └── logo.svg
125
132
  ```
@@ -127,8 +134,8 @@ app/javascript:
127
134
  In `/packs/application.js`, include this at the top of the file:
128
135
 
129
136
  ```js
130
- import "core-js/stable";
131
- import "regenerator-runtime/runtime";
137
+ import 'core-js/stable'
138
+ import 'regenerator-runtime/runtime'
132
139
  ```
133
140
 
134
141
  You can then link the JavaScript pack in Rails views using the `javascript_pack_tag` helper.
@@ -175,7 +182,6 @@ helper otherwise you will get duplicated chunks on the page.
175
182
  **Note:** In order for your styles or static assets files to be available in your view,
176
183
  you would need to link them in your "pack" or entry file.
177
184
 
178
-
179
185
  ### Development
180
186
 
181
187
  Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`.
@@ -240,7 +246,6 @@ WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
240
246
 
241
247
  See [docs/webpack](docs/webpack.md) for modifying webpack configuration and loaders.
242
248
 
243
-
244
249
  ### Custom Rails environments
245
250
 
246
251
  Out of the box Webpacker ships with - development, test and production environments in `config/webpacker.yml` however, in most production apps extra environments are needed as part of deployment workflow. Webpacker supports this out of the box from version 3.4.0+ onwards.
@@ -290,7 +295,6 @@ bundle exec rails assets:precompile
290
295
  bundle exec rails webpacker:compile
291
296
  ```
292
297
 
293
-
294
298
  ### Upgrading
295
299
 
296
300
  You can run following commands to upgrade Webpacker to the latest stable version. This process involves upgrading the gem and related JavaScript packages:
@@ -305,247 +309,23 @@ yarn upgrade webpack-dev-server --latest
305
309
  yarn add @rails/webpacker@next
306
310
  ```
307
311
 
308
- ### Yarn Integrity
309
-
310
- By default, in development, webpacker runs a yarn integrity check to ensure that all local JavaScript packages are up-to-date. This is similar to what bundler does currently in Rails, but for JavaScript packages. If your system is out of date, then Rails will not initialize. You will be asked to upgrade your local JavaScript packages by running `yarn install`.
311
-
312
- To turn off this option, you will need to change the default setting in `config/webpacker.yml`:
313
-
314
- ```yaml
315
- # config/webpacker.yml
316
- development:
317
- ...
318
- # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
319
- check_yarn_integrity: false
320
- ```
321
-
322
- You may also turn on this feature by adding the config option for any Rails environment in `config/webpacker.yml`:
323
-
324
- ```yaml
325
- check_yarn_integrity: true
326
- ```
327
-
328
312
  ## Integrations
329
313
 
330
- Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
331
- You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
332
-
333
- ### React
334
-
335
- To use Webpacker with [React](https://facebook.github.io/react/), create a
336
- new Rails 5.1+ app using `--webpack=react` option:
337
-
338
- ```bash
339
- # Rails 5.1+
340
- rails new myapp --webpack=react
341
- ```
342
-
343
- (or run `bundle exec rails webpacker:install:react` in an existing Rails app already
344
- setup with Webpacker).
314
+ Webpacker ships with basic out-of-the-box integration. You can see a list of available commands/tasks by running `bundle exec rails webpacker`.
345
315
 
346
- The installer will add all relevant dependencies using Yarn, changes
347
- to the configuration files, and an example React component to your
348
- project in `app/javascript/packs` so that you can experiment with React right away.
316
+ Included install integrations:
349
317
 
318
+ - [React](./docs/integrations.md#React)
319
+ - [Angular with TypeScript](./docs/integrations.md#Angular-with-TypeScript)
320
+ - [Vue](./docs/integrations.md#Vue)
321
+ - [Elm](./docs/integrations.md#Elm)
322
+ - [Svelte](./docs/integrations.md#Svelte)
323
+ - [Stimulus](./docs/integrations.md#Stimulus)
324
+ - [CoffeeScript](./docs/integrations.md#CoffeeScript)
325
+ - [Typescript](./docs/typescript.md)
326
+ - [Erb](./docs/integrations.md#Erb)
350
327
 
351
- ### Angular with TypeScript
352
-
353
- To use Webpacker with [Angular](https://angular.io/), create a
354
- new Rails 5.1+ app using `--webpack=angular` option:
355
-
356
- ```bash
357
- # Rails 5.1+
358
- rails new myapp --webpack=angular
359
- ```
360
-
361
- (or run `bundle exec rails webpacker:install:angular` on a Rails app already
362
- setup with Webpacker).
363
-
364
- The installer will add the TypeScript and Angular core libraries using Yarn alongside
365
- a few changes to the configuration files. An example component written in
366
- TypeScript will also be added to your project in `app/javascript` so that
367
- you can experiment with Angular right away.
368
-
369
- By default, Angular uses a JIT compiler for development environment. This
370
- compiler is not compatible with restrictive CSP (Content Security
371
- Policy) environments like Rails 5.2+. You can use Angular AOT compiler
372
- in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
373
-
374
- Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for your
375
- development environment. This can be done in the `config/initializers/content_security_policy.rb`
376
- with the following code:
377
-
378
- ```ruby
379
- Rails.application.config.content_security_policy do |policy|
380
- if Rails.env.development?
381
- policy.script_src :self, :https, :unsafe_eval
382
- else
383
- policy.script_src :self, :https
384
- end
385
- end
386
- ```
387
-
388
-
389
- ### Vue
390
-
391
- To use Webpacker with [Vue](https://vuejs.org/), create a
392
- new Rails 5.1+ app using `--webpack=vue` option:
393
-
394
- ```bash
395
- # Rails 5.1+
396
- rails new myapp --webpack=vue
397
- ```
398
- (or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
399
-
400
- The installer will add Vue and its required libraries using Yarn alongside
401
- automatically applying changes needed to the configuration files. An example component will
402
- be added to your project in `app/javascript` so that you can experiment with Vue right away.
403
-
404
- If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
405
- This can be done in the `config/initializers/content_security_policy.rb` with the following
406
- configuration:
407
-
408
- ```ruby
409
- Rails.application.config.content_security_policy do |policy|
410
- if Rails.env.development?
411
- policy.script_src :self, :https, :unsafe_eval
412
- else
413
- policy.script_src :self, :https
414
- end
415
- end
416
- ```
417
- You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
418
-
419
- #### Lazy loading integration
420
-
421
- See [docs/es6](docs/es6.md) to know more about Webpack and Webpacker configuration.
422
-
423
- For instance, you can lazy load Vue JS components:
424
-
425
- Before:
426
- ```js
427
- import Vue from 'vue'
428
- import { VCard } from 'vuetify/lib'
429
-
430
- Vue.component('VCard', VCard)
431
- ```
432
-
433
- After:
434
- ```js
435
- import Vue from 'vue'
436
-
437
- // With destructuring assignment
438
- Vue.component('VCard', import('vuetify/lib').then(({ VCard }) => VCard)
439
-
440
- // Or without destructuring assignment
441
- Vue.component('OtherComponent', () => import('./OtherComponent'))
442
- ```
443
-
444
- You can use it in a Single File Component as well:
445
-
446
- ```html
447
- <template>
448
- ...
449
- </template>
450
-
451
- <script>
452
- export default {
453
- components: {
454
- OtherComponent: () => import('./OtherComponent')
455
- }
456
- }
457
- </script>
458
- ```
459
-
460
- By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.
461
-
462
- ##### Automatic registration
463
-
464
- ```js
465
- /**
466
- * The following block of code may be used to automatically register your
467
- * Vue components. It will recursively scan this directory for the Vue
468
- * components and automatically register them with their "basename".
469
- *
470
- * Eg. ./components/OtherComponent.vue -> <other-component></other-component>
471
- * Eg. ./UI/ButtonComponent.vue -> <button-component></button-component>
472
- */
473
-
474
- const files = require.context('./', true, /\.vue$/i)
475
- files.keys().map(key => {
476
- const component = key.split('/').pop().split('.')[0]
477
-
478
- // With Lazy Loading
479
- Vue.component(component, () => import(`${key}`))
480
-
481
- // Or without Lazy Loading
482
- Vue.component(component, files(key).default)
483
- })
484
- ```
485
-
486
- ### Elm
487
-
488
- To use Webpacker with [Elm](http://elm-lang.org), create a
489
- new Rails 5.1+ app using `--webpack=elm` option:
490
-
491
- ```
492
- # Rails 5.1+
493
- rails new myapp --webpack=elm
494
- ```
495
-
496
- (or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
497
-
498
- The Elm library and its core packages will be added via Yarn and Elm.
499
- An example `Main.elm` app will also be added to your project in `app/javascript`
500
- so that you can experiment with Elm right away.
501
-
502
- ### Svelte
503
-
504
- To use Webpacker with [Svelte](https://svelte.dev), create a
505
- new Rails 5.1+ app using `--webpack=svelte` option:
506
-
507
- ```
508
- # Rails 5.1+
509
- rails new myapp --webpack=svelte
510
- ```
511
-
512
- (or run `bundle exec rails webpacker:install:svelte` on a Rails app already setup with Webpacker).
513
-
514
- Please play with the [Svelte Tutorial](https://svelte.dev/tutorial/basics) or learn more about its API at https://svelte.dev/docs
515
-
516
- ### Stimulus
517
-
518
- To use Webpacker with [Stimulus](http://stimulusjs.org), create a
519
- new Rails 5.1+ app using `--webpack=stimulus` option:
520
-
521
- ```
522
- # Rails 5.1+
523
- rails new myapp --webpack=stimulus
524
- ```
525
-
526
- (or run `bundle exec rails webpacker:install:stimulus` on a Rails app already setup with Webpacker).
527
-
528
- Please read [The Stimulus Handbook](https://stimulusjs.org/handbook/introduction) or learn more about its source code at https://github.com/stimulusjs/stimulus
529
-
530
- ### CoffeeScript
531
-
532
- To add [CoffeeScript](http://coffeescript.org/) support,
533
- run `bundle exec rails webpacker:install:coffee` on a Rails app already
534
- setup with Webpacker.
535
-
536
- An example `hello_coffee.coffee` file will also be added to your project
537
- in `app/javascript/packs` so that you can experiment with CoffeeScript right away.
538
-
539
- ### Erb
540
-
541
- To add [Erb](https://apidock.com/ruby/ERB) support in your JS templates,
542
- run `bundle exec rails webpacker:install:erb` on a Rails app already
543
- setup with Webpacker.
544
-
545
- An example `hello_erb.js.erb` file will also be added to your project
546
- in `app/javascript/packs` so that you can experiment with Erb-flavoured
547
- javascript right away.
548
-
328
+ See [Integrations](./docs/integrations.md) for further details.
549
329
 
550
330
  ## Paths
551
331
 
@@ -582,17 +362,16 @@ development:
582
362
 
583
363
  If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
584
364
 
585
-
586
365
  ### Resolved
587
366
 
588
367
  If you are adding Webpacker to an existing app that has most of the assets inside
589
368
  `app/assets` or inside an engine, and you want to share that
590
- with webpack modules, you can use the `resolved_paths`
369
+ with webpack modules, you can use the `additional_paths`
591
370
  option available in `config/webpacker.yml`. This lets you
592
371
  add additional paths that webpack should lookup when resolving modules:
593
372
 
594
373
  ```yml
595
- resolved_paths: ['app/assets']
374
+ additional_paths: ['app/assets']
596
375
  ```
597
376
 
598
377
  You can then import these items inside your modules like so:
@@ -607,24 +386,11 @@ import 'images/rails.png'
607
386
  will make the compilation slow, consider adding specific paths instead of
608
387
  whole parent directory if you just need to reference one or two modules
609
388
 
610
-
611
- ### Watched
612
-
613
- By default, the lazy compilation is cached until a file is changed under your
614
- tracked paths. You can configure which paths are tracked
615
- by adding new paths to `watched_paths` array. This is much like Rails' `autoload_paths`:
616
-
617
- ```rb
618
- # config/initializers/webpacker.rb
619
- # or config/application.rb
620
- Webpacker::Compiler.watched_paths << 'bower_components'
621
- ```
622
-
623
-
624
389
  ## Deployment
625
390
 
626
391
  Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. If you are not using Sprockets, `webpacker:compile` is automatically aliased to `assets:precompile`. Similar to sprockets both rake tasks will compile packs in production mode but will use `RAILS_ENV` to load configuration from `config/webpacker.yml` (if available).
627
392
 
393
+ When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to use `yarn install --frozen-lockfile` to install NPM packages on the remote host to ensure that the installed packages match the `yarn.lock` file.
628
394
 
629
395
  ## Docs
630
396
 
@@ -633,9 +399,7 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
633
399
  - [Webpack-dev-server](./docs/webpack-dev-server.md)
634
400
  - [Environment Variables](./docs/env.md)
635
401
  - [Folder Structure](./docs/folder-structure.md)
636
- - [Assets](./docs/assets.md)
637
- - [CSS, Sass and SCSS](./docs/css.md)
638
- - [ES6](./docs/es6.md)
402
+ - [Assets](./docs/assets.md) - [CSS, Sass and SCSS](./docs/css.md) - [ES6](./docs/es6.md), [Target browsers](./docs/target.md)
639
403
  - [Props](./docs/props.md)
640
404
  - [Typescript](./docs/typescript.md)
641
405
  - [Yarn](./docs/yarn.md)
@@ -648,12 +412,12 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
648
412
  - [Troubleshooting](./docs/troubleshooting.md)
649
413
  - [v3 to v4 Upgrade Guide](./docs/v4-upgrade.md)
650
414
 
651
-
652
415
  ## Contributing
416
+
653
417
  [![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)
654
418
 
655
419
  We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
656
420
 
657
-
658
421
  ## License
422
+
659
423
  Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).