webpacker 5.4.3 → 6.0.0.beta
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintrc.js +1 -1
- data/.github/workflows/ruby.yml +12 -0
- data/.gitignore +2 -0
- data/.node-version +1 -1
- data/.rubocop.yml +3 -108
- data/6_0_upgrade.md +43 -0
- data/CHANGELOG.md +19 -18
- data/CONTRIBUTING.md +1 -1
- data/Gemfile.lock +91 -94
- data/README.md +220 -99
- data/gemfiles/Gemfile-rails-edge +1 -1
- data/lib/install/config/webpack/base.js +3 -0
- data/lib/install/config/webpack/development.js +2 -2
- data/lib/install/config/webpack/production.js +2 -2
- data/lib/install/config/webpack/test.js +2 -2
- data/lib/install/config/webpacker.yml +8 -37
- data/lib/install/javascript/packs/application.css +9 -0
- data/lib/install/javascript/packs/application.js +3 -1
- data/lib/install/template.rb +32 -26
- data/lib/tasks/webpacker/binstubs.rake +6 -4
- data/lib/tasks/webpacker/check_binstubs.rake +4 -4
- data/lib/tasks/webpacker/check_yarn.rake +1 -1
- data/lib/tasks/webpacker/compile.rake +4 -2
- data/lib/tasks/webpacker/info.rake +12 -10
- data/lib/tasks/webpacker/install.rake +6 -4
- data/lib/tasks/webpacker/verify_install.rake +2 -1
- data/lib/tasks/webpacker/yarn_install.rake +9 -7
- data/lib/tasks/webpacker.rake +2 -11
- data/lib/webpacker/compiler.rb +15 -8
- data/lib/webpacker/configuration.rb +10 -45
- data/lib/webpacker/dev_server_runner.rb +21 -2
- data/lib/webpacker/env.rb +1 -5
- data/lib/webpacker/helper.rb +22 -32
- data/lib/webpacker/manifest.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +5 -0
- data/package/__tests__/config.js +5 -37
- data/package/__tests__/development.js +9 -11
- data/package/__tests__/env.js +12 -4
- data/package/__tests__/production.js +6 -6
- data/package/__tests__/staging.js +7 -6
- data/package/__tests__/test.js +4 -5
- data/package/babel/preset.js +55 -0
- data/package/config.js +3 -11
- data/package/env.js +8 -2
- data/package/environments/__tests__/base.js +15 -47
- data/package/environments/base.js +62 -125
- data/package/environments/development.js +45 -44
- data/package/environments/production.js +63 -68
- data/package/environments/test.js +2 -2
- data/package/index.js +13 -8
- data/package/rules/babel.js +9 -7
- data/package/rules/coffee.js +6 -0
- data/package/rules/erb.js +15 -0
- data/package/rules/file.js +19 -19
- data/package/rules/index.js +15 -18
- data/package/rules/less.js +22 -0
- data/package/rules/sass.js +10 -10
- data/package/rules/svg.js +20 -0
- data/package/utils/get_style_rule.js +26 -36
- data/package/utils/helpers.js +26 -35
- data/package.json +29 -45
- data/test/compiler_test.rb +0 -12
- data/test/configuration_test.rb +1 -32
- data/test/dev_server_runner_test.rb +24 -5
- data/test/engine_rake_tasks_test.rb +39 -0
- data/test/helper_test.rb +24 -30
- data/test/mounted_app/Rakefile +4 -0
- data/test/mounted_app/test/dummy/Rakefile +3 -0
- data/test/mounted_app/test/dummy/bin/rails +3 -0
- data/test/mounted_app/test/dummy/bin/rake +3 -0
- data/test/mounted_app/test/dummy/config/application.rb +10 -0
- data/test/mounted_app/test/dummy/config/environment.rb +3 -0
- data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
- data/test/mounted_app/test/dummy/config.ru +5 -0
- data/test/mounted_app/test/dummy/package.json +7 -0
- data/test/rake_tasks_test.rb +1 -10
- data/test/test_app/config/webpacker.yml +1 -25
- data/test/test_app/config/webpacker_public_root.yml +0 -1
- data/test/test_app/public/packs/manifest.json +17 -13
- data/test/test_app/some.config.js +0 -0
- data/test/webpack_runner_test.rb +9 -3
- data/yarn.lock +2505 -4943
- metadata +41 -87
- data/.travis.yml +0 -43
- data/docs/assets.md +0 -119
- data/docs/cloud9.md +0 -310
- data/docs/css.md +0 -308
- data/docs/deployment.md +0 -130
- data/docs/docker.md +0 -68
- data/docs/engines.md +0 -213
- data/docs/env.md +0 -63
- data/docs/es6.md +0 -72
- data/docs/folder-structure.md +0 -66
- data/docs/integrations.md +0 -220
- data/docs/misc.md +0 -23
- data/docs/props.md +0 -223
- data/docs/target.md +0 -22
- data/docs/testing.md +0 -136
- data/docs/troubleshooting.md +0 -158
- data/docs/typescript.md +0 -190
- data/docs/v4-upgrade.md +0 -142
- data/docs/webpack-dev-server.md +0 -92
- data/docs/webpack.md +0 -364
- data/docs/yarn.md +0 -23
- data/lib/install/angular.rb +0 -23
- data/lib/install/coffee.rb +0 -25
- data/lib/install/config/.browserslistrc +0 -1
- data/lib/install/config/babel.config.js +0 -82
- data/lib/install/config/postcss.config.js +0 -12
- data/lib/install/config/webpack/environment.js +0 -3
- data/lib/install/elm.rb +0 -39
- data/lib/install/erb.rb +0 -25
- data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
- data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
- data/lib/install/examples/angular/hello_angular/index.ts +0 -8
- data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
- data/lib/install/examples/angular/hello_angular.js +0 -7
- data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
- data/lib/install/examples/elm/Main.elm +0 -55
- data/lib/install/examples/elm/hello_elm.js +0 -16
- data/lib/install/examples/erb/hello_erb.js.erb +0 -6
- data/lib/install/examples/react/babel.config.js +0 -99
- data/lib/install/examples/react/hello_react.jsx +0 -26
- data/lib/install/examples/react/tsconfig.json +0 -21
- data/lib/install/examples/stimulus/application.js +0 -1
- data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
- data/lib/install/examples/stimulus/controllers/index.js +0 -9
- data/lib/install/examples/svelte/app.svelte +0 -11
- data/lib/install/examples/svelte/hello_svelte.js +0 -20
- data/lib/install/examples/typescript/hello_typescript.ts +0 -4
- data/lib/install/examples/typescript/tsconfig.json +0 -24
- data/lib/install/examples/vue/app.vue +0 -22
- data/lib/install/examples/vue/hello_vue.js +0 -72
- data/lib/install/loaders/coffee.js +0 -6
- data/lib/install/loaders/elm.js +0 -25
- data/lib/install/loaders/erb.js +0 -11
- data/lib/install/loaders/svelte.js +0 -9
- data/lib/install/loaders/vue.js +0 -6
- data/lib/install/react.rb +0 -18
- data/lib/install/stimulus.rb +0 -12
- data/lib/install/svelte.rb +0 -29
- data/lib/install/typescript.rb +0 -39
- data/lib/install/vue.rb +0 -49
- data/lib/tasks/installers.rake +0 -42
- data/package/config_types/__tests__/config_list.js +0 -118
- data/package/config_types/__tests__/config_object.js +0 -43
- data/package/config_types/config_list.js +0 -75
- data/package/config_types/config_object.js +0 -55
- data/package/config_types/index.js +0 -7
- data/package/rules/module.css.js +0 -3
- data/package/rules/module.sass.js +0 -8
- data/package/rules/node_modules.js +0 -22
- data/package/utils/__tests__/deep_assign.js +0 -32
- data/package/utils/__tests__/deep_merge.js +0 -10
- data/package/utils/__tests__/get_style_rule.js +0 -65
- data/package/utils/__tests__/objectify.js +0 -9
- data/package/utils/deep_assign.js +0 -22
- data/package/utils/deep_merge.js +0 -22
- data/package/utils/objectify.js +0 -3
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: webpacker
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 6.0.0.beta
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- David Heinemeier Hansson
|
8
8
|
- Gaurav Tiwari
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2020-12-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: activesupport
|
@@ -109,7 +109,7 @@ dependencies:
|
|
109
109
|
- - ">="
|
110
110
|
- !ruby/object:Gem::Version
|
111
111
|
version: '0'
|
112
|
-
description:
|
112
|
+
description:
|
113
113
|
email:
|
114
114
|
- david@basecamp.com
|
115
115
|
- gaurav@gauravtiwari.co.uk
|
@@ -126,7 +126,7 @@ files:
|
|
126
126
|
- ".gitignore"
|
127
127
|
- ".node-version"
|
128
128
|
- ".rubocop.yml"
|
129
|
-
-
|
129
|
+
- 6_0_upgrade.md
|
130
130
|
- CHANGELOG.md
|
131
131
|
- CONTRIBUTING.md
|
132
132
|
- Gemfile
|
@@ -134,78 +134,20 @@ files:
|
|
134
134
|
- MIT-LICENSE
|
135
135
|
- README.md
|
136
136
|
- Rakefile
|
137
|
-
- docs/assets.md
|
138
|
-
- docs/cloud9.md
|
139
|
-
- docs/css.md
|
140
|
-
- docs/deployment.md
|
141
|
-
- docs/docker.md
|
142
|
-
- docs/engines.md
|
143
|
-
- docs/env.md
|
144
|
-
- docs/es6.md
|
145
|
-
- docs/folder-structure.md
|
146
|
-
- docs/integrations.md
|
147
|
-
- docs/misc.md
|
148
|
-
- docs/props.md
|
149
|
-
- docs/target.md
|
150
|
-
- docs/testing.md
|
151
|
-
- docs/troubleshooting.md
|
152
|
-
- docs/typescript.md
|
153
|
-
- docs/v4-upgrade.md
|
154
|
-
- docs/webpack-dev-server.md
|
155
|
-
- docs/webpack.md
|
156
|
-
- docs/yarn.md
|
157
137
|
- gemfiles/Gemfile-rails-edge
|
158
138
|
- gemfiles/Gemfile-rails.5.2.x
|
159
139
|
- gemfiles/Gemfile-rails.6.0.x
|
160
|
-
- lib/install/angular.rb
|
161
140
|
- lib/install/bin/webpack
|
162
141
|
- lib/install/bin/webpack-dev-server
|
163
142
|
- lib/install/binstubs.rb
|
164
|
-
- lib/install/
|
165
|
-
- lib/install/config/.browserslistrc
|
166
|
-
- lib/install/config/babel.config.js
|
167
|
-
- lib/install/config/postcss.config.js
|
143
|
+
- lib/install/config/webpack/base.js
|
168
144
|
- lib/install/config/webpack/development.js
|
169
|
-
- lib/install/config/webpack/environment.js
|
170
145
|
- lib/install/config/webpack/production.js
|
171
146
|
- lib/install/config/webpack/test.js
|
172
147
|
- lib/install/config/webpacker.yml
|
173
|
-
- lib/install/
|
174
|
-
- lib/install/erb.rb
|
175
|
-
- lib/install/examples/angular/hello_angular.js
|
176
|
-
- lib/install/examples/angular/hello_angular/app/app.component.ts
|
177
|
-
- lib/install/examples/angular/hello_angular/app/app.module.ts
|
178
|
-
- lib/install/examples/angular/hello_angular/index.ts
|
179
|
-
- lib/install/examples/angular/hello_angular/polyfills.ts
|
180
|
-
- lib/install/examples/coffee/hello_coffee.coffee
|
181
|
-
- lib/install/examples/elm/Main.elm
|
182
|
-
- lib/install/examples/elm/hello_elm.js
|
183
|
-
- lib/install/examples/erb/hello_erb.js.erb
|
184
|
-
- lib/install/examples/react/babel.config.js
|
185
|
-
- lib/install/examples/react/hello_react.jsx
|
186
|
-
- lib/install/examples/react/tsconfig.json
|
187
|
-
- lib/install/examples/stimulus/application.js
|
188
|
-
- lib/install/examples/stimulus/controllers/hello_controller.js
|
189
|
-
- lib/install/examples/stimulus/controllers/index.js
|
190
|
-
- lib/install/examples/svelte/app.svelte
|
191
|
-
- lib/install/examples/svelte/hello_svelte.js
|
192
|
-
- lib/install/examples/typescript/hello_typescript.ts
|
193
|
-
- lib/install/examples/typescript/tsconfig.json
|
194
|
-
- lib/install/examples/vue/app.vue
|
195
|
-
- lib/install/examples/vue/hello_vue.js
|
148
|
+
- lib/install/javascript/packs/application.css
|
196
149
|
- lib/install/javascript/packs/application.js
|
197
|
-
- lib/install/loaders/coffee.js
|
198
|
-
- lib/install/loaders/elm.js
|
199
|
-
- lib/install/loaders/erb.js
|
200
|
-
- lib/install/loaders/svelte.js
|
201
|
-
- lib/install/loaders/vue.js
|
202
|
-
- lib/install/react.rb
|
203
|
-
- lib/install/stimulus.rb
|
204
|
-
- lib/install/svelte.rb
|
205
150
|
- lib/install/template.rb
|
206
|
-
- lib/install/typescript.rb
|
207
|
-
- lib/install/vue.rb
|
208
|
-
- lib/tasks/installers.rake
|
209
151
|
- lib/tasks/webpacker.rake
|
210
152
|
- lib/tasks/webpacker/binstubs.rake
|
211
153
|
- lib/tasks/webpacker/check_binstubs.rake
|
@@ -241,13 +183,9 @@ files:
|
|
241
183
|
- package/__tests__/production.js
|
242
184
|
- package/__tests__/staging.js
|
243
185
|
- package/__tests__/test.js
|
186
|
+
- package/babel/preset.js
|
244
187
|
- package/config.js
|
245
188
|
- package/configPath.js
|
246
|
-
- package/config_types/__tests__/config_list.js
|
247
|
-
- package/config_types/__tests__/config_object.js
|
248
|
-
- package/config_types/config_list.js
|
249
|
-
- package/config_types/config_object.js
|
250
|
-
- package/config_types/index.js
|
251
189
|
- package/dev_server.js
|
252
190
|
- package/env.js
|
253
191
|
- package/environments/__tests__/base.js
|
@@ -257,30 +195,34 @@ files:
|
|
257
195
|
- package/environments/test.js
|
258
196
|
- package/index.js
|
259
197
|
- package/rules/babel.js
|
198
|
+
- package/rules/coffee.js
|
260
199
|
- package/rules/css.js
|
200
|
+
- package/rules/erb.js
|
261
201
|
- package/rules/file.js
|
262
202
|
- package/rules/index.js
|
263
|
-
- package/rules/
|
264
|
-
- package/rules/module.sass.js
|
265
|
-
- package/rules/node_modules.js
|
203
|
+
- package/rules/less.js
|
266
204
|
- package/rules/sass.js
|
267
|
-
- package/
|
268
|
-
- package/utils/__tests__/deep_merge.js
|
269
|
-
- package/utils/__tests__/get_style_rule.js
|
270
|
-
- package/utils/__tests__/objectify.js
|
271
|
-
- package/utils/deep_assign.js
|
272
|
-
- package/utils/deep_merge.js
|
205
|
+
- package/rules/svg.js
|
273
206
|
- package/utils/get_style_rule.js
|
274
207
|
- package/utils/helpers.js
|
275
|
-
- package/utils/objectify.js
|
276
208
|
- test/command_test.rb
|
277
209
|
- test/compiler_test.rb
|
278
210
|
- test/configuration_test.rb
|
279
211
|
- test/dev_server_runner_test.rb
|
280
212
|
- test/dev_server_test.rb
|
213
|
+
- test/engine_rake_tasks_test.rb
|
281
214
|
- test/env_test.rb
|
282
215
|
- test/helper_test.rb
|
283
216
|
- test/manifest_test.rb
|
217
|
+
- test/mounted_app/Rakefile
|
218
|
+
- test/mounted_app/test/dummy/Rakefile
|
219
|
+
- test/mounted_app/test/dummy/bin/rails
|
220
|
+
- test/mounted_app/test/dummy/bin/rake
|
221
|
+
- test/mounted_app/test/dummy/config.ru
|
222
|
+
- test/mounted_app/test/dummy/config/application.rb
|
223
|
+
- test/mounted_app/test/dummy/config/environment.rb
|
224
|
+
- test/mounted_app/test/dummy/config/webpacker.yml
|
225
|
+
- test/mounted_app/test/dummy/package.json
|
284
226
|
- test/rake_tasks_test.rb
|
285
227
|
- test/test_app/Rakefile
|
286
228
|
- test/test_app/app/javascript/packs/application.js
|
@@ -296,6 +238,7 @@ files:
|
|
296
238
|
- test/test_app/config/webpacker_public_root.yml
|
297
239
|
- test/test_app/package.json
|
298
240
|
- test/test_app/public/packs/manifest.json
|
241
|
+
- test/test_app/some.config.js
|
299
242
|
- test/test_app/yarn.lock
|
300
243
|
- test/test_helper.rb
|
301
244
|
- test/webpack_runner_test.rb
|
@@ -306,9 +249,9 @@ homepage: https://github.com/rails/webpacker
|
|
306
249
|
licenses:
|
307
250
|
- MIT
|
308
251
|
metadata:
|
309
|
-
source_code_uri: https://github.com/rails/webpacker/tree/
|
310
|
-
changelog_uri: https://github.com/rails/webpacker/blob/
|
311
|
-
post_install_message:
|
252
|
+
source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.beta
|
253
|
+
changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.beta/CHANGELOG.md
|
254
|
+
post_install_message:
|
312
255
|
rdoc_options: []
|
313
256
|
require_paths:
|
314
257
|
- lib
|
@@ -319,12 +262,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
319
262
|
version: 2.4.0
|
320
263
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
321
264
|
requirements:
|
322
|
-
- - "
|
265
|
+
- - ">"
|
323
266
|
- !ruby/object:Gem::Version
|
324
|
-
version:
|
267
|
+
version: 1.3.1
|
325
268
|
requirements: []
|
326
|
-
rubygems_version: 3.
|
327
|
-
signing_key:
|
269
|
+
rubygems_version: 3.0.3
|
270
|
+
signing_key:
|
328
271
|
specification_version: 4
|
329
272
|
summary: Use webpack to manage app-like JavaScript modules in Rails
|
330
273
|
test_files:
|
@@ -333,9 +276,19 @@ test_files:
|
|
333
276
|
- test/configuration_test.rb
|
334
277
|
- test/dev_server_runner_test.rb
|
335
278
|
- test/dev_server_test.rb
|
279
|
+
- test/engine_rake_tasks_test.rb
|
336
280
|
- test/env_test.rb
|
337
281
|
- test/helper_test.rb
|
338
282
|
- test/manifest_test.rb
|
283
|
+
- test/mounted_app/Rakefile
|
284
|
+
- test/mounted_app/test/dummy/Rakefile
|
285
|
+
- test/mounted_app/test/dummy/bin/rails
|
286
|
+
- test/mounted_app/test/dummy/bin/rake
|
287
|
+
- test/mounted_app/test/dummy/config.ru
|
288
|
+
- test/mounted_app/test/dummy/config/application.rb
|
289
|
+
- test/mounted_app/test/dummy/config/environment.rb
|
290
|
+
- test/mounted_app/test/dummy/config/webpacker.yml
|
291
|
+
- test/mounted_app/test/dummy/package.json
|
339
292
|
- test/rake_tasks_test.rb
|
340
293
|
- test/test_app/Rakefile
|
341
294
|
- test/test_app/app/javascript/packs/application.js
|
@@ -351,6 +304,7 @@ test_files:
|
|
351
304
|
- test/test_app/config/webpacker_public_root.yml
|
352
305
|
- test/test_app/package.json
|
353
306
|
- test/test_app/public/packs/manifest.json
|
307
|
+
- test/test_app/some.config.js
|
354
308
|
- test/test_app/yarn.lock
|
355
309
|
- test/test_helper.rb
|
356
310
|
- test/webpack_runner_test.rb
|
data/.travis.yml
DELETED
@@ -1,43 +0,0 @@
|
|
1
|
-
language: ruby
|
2
|
-
dist: xenial
|
3
|
-
before_install:
|
4
|
-
- gem install rubygems-update && update_rubygems
|
5
|
-
- yes | rvm @global do gem install bundler -v 2.1.4 || true
|
6
|
-
rvm:
|
7
|
-
- 2.4.9
|
8
|
-
- 2.5.5
|
9
|
-
- 2.6.5
|
10
|
-
- 2.7.0
|
11
|
-
- ruby-head
|
12
|
-
gemfile:
|
13
|
-
- gemfiles/Gemfile-rails.5.2.x
|
14
|
-
- gemfiles/Gemfile-rails.6.0.x
|
15
|
-
- gemfiles/Gemfile-rails-edge
|
16
|
-
cache:
|
17
|
-
bundler: true
|
18
|
-
directories:
|
19
|
-
- node_modules
|
20
|
-
yarn: true
|
21
|
-
|
22
|
-
install:
|
23
|
-
- bundle install --jobs 3 --retry 3
|
24
|
-
- nvm install 12
|
25
|
-
- node -v
|
26
|
-
- npm i -g yarn
|
27
|
-
- yarn
|
28
|
-
script:
|
29
|
-
- yarn lint
|
30
|
-
- yarn test
|
31
|
-
- bundle exec rubocop
|
32
|
-
- bundle exec rake test
|
33
|
-
matrix:
|
34
|
-
allow_failures:
|
35
|
-
- gemfile: gemfiles/Gemfile-rails-edge
|
36
|
-
- rvm: ruby-head
|
37
|
-
exclude:
|
38
|
-
- rvm: 2.4.9
|
39
|
-
gemfile: gemfiles/Gemfile-rails-edge
|
40
|
-
- rvm: 2.5.5
|
41
|
-
gemfile: gemfiles/Gemfile-rails-edge
|
42
|
-
- rvm: 2.4.9
|
43
|
-
gemfile: gemfiles/Gemfile-rails.6.0.x
|
data/docs/assets.md
DELETED
@@ -1,119 +0,0 @@
|
|
1
|
-
# Assets
|
2
|
-
|
3
|
-
|
4
|
-
Static assets like images and fonts support is enabled out-of-box
|
5
|
-
and you can link them into your JavaScript app code and have them
|
6
|
-
compiled automatically.
|
7
|
-
|
8
|
-
|
9
|
-
## Import from node modules
|
10
|
-
|
11
|
-
You can also import styles from `node_modules` using the following syntax.
|
12
|
-
Please note that your styles will always be extracted into `[pack_name].css`:
|
13
|
-
|
14
|
-
```sass
|
15
|
-
// app/javascript/styles.sass
|
16
|
-
// ~ to tell webpack that this is not a relative import:
|
17
|
-
|
18
|
-
@import '~@material/animation/mdc-animation'
|
19
|
-
@import '~bootstrap/dist/css/bootstrap'
|
20
|
-
```
|
21
|
-
|
22
|
-
```js
|
23
|
-
// Your main app pack
|
24
|
-
// app/javascript/packs/app.js
|
25
|
-
|
26
|
-
import '../styles'
|
27
|
-
```
|
28
|
-
|
29
|
-
```erb
|
30
|
-
<%# In your views %>
|
31
|
-
|
32
|
-
<%= javascript_pack_tag 'app' %>
|
33
|
-
<%= stylesheet_pack_tag 'app' %>
|
34
|
-
```
|
35
|
-
|
36
|
-
|
37
|
-
## Import from Sprockets using helpers
|
38
|
-
|
39
|
-
It's possible to link to assets that have been precompiled by Sprockets. Add the `.erb` extension to your JavaScript file, then you can use Sprockets' asset helpers:
|
40
|
-
|
41
|
-
```erb
|
42
|
-
<%# app/javascript/my_pack/example.js.erb %>
|
43
|
-
|
44
|
-
<% helpers = ActionController::Base.helpers %>
|
45
|
-
const railsImagePath = "<%= helpers.image_path('rails.png') %>"
|
46
|
-
```
|
47
|
-
|
48
|
-
This is enabled by the `rails-erb-loader` loader rule in `config/webpack/loaders/erb.js`.
|
49
|
-
|
50
|
-
|
51
|
-
## Using babel module resolver
|
52
|
-
|
53
|
-
You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver) to reference assets directly from `app/assets/**`
|
54
|
-
|
55
|
-
```bash
|
56
|
-
yarn add babel-plugin-module-resolver
|
57
|
-
```
|
58
|
-
|
59
|
-
Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
|
60
|
-
|
61
|
-
```js
|
62
|
-
{
|
63
|
-
plugins: [
|
64
|
-
[require("babel-plugin-module-resolver").default, {
|
65
|
-
"root": ["./app"],
|
66
|
-
"alias": {
|
67
|
-
"assets": "./assets"
|
68
|
-
}
|
69
|
-
}]
|
70
|
-
]
|
71
|
-
}
|
72
|
-
```
|
73
|
-
|
74
|
-
And then within your javascript app code:
|
75
|
-
|
76
|
-
```js
|
77
|
-
// Note: we don't have to do any ../../ jazz
|
78
|
-
|
79
|
-
import FooImage from 'assets/images/foo-image.png'
|
80
|
-
import 'assets/stylesheets/bar'
|
81
|
-
```
|
82
|
-
|
83
|
-
|
84
|
-
## Link in your Rails views
|
85
|
-
|
86
|
-
You can also link `js/images/styles/fonts` used within your js app in views using
|
87
|
-
`asset_pack_path` and `image_pack_tag` helpers. These helpers are useful in cases where you just want to
|
88
|
-
create a `<link rel="prefetch">` or `<img />` for an asset.
|
89
|
-
|
90
|
-
```yml
|
91
|
-
app/javascript:
|
92
|
-
- packs
|
93
|
-
- app.js
|
94
|
-
- images
|
95
|
-
- calendar.png
|
96
|
-
```
|
97
|
-
|
98
|
-
```js
|
99
|
-
// app/javascript/packs/app.js (or any of your packs)
|
100
|
-
|
101
|
-
// import all image files in a folder:
|
102
|
-
require.context('../images', true)
|
103
|
-
```
|
104
|
-
|
105
|
-
```erb
|
106
|
-
<%# Rails view, for example app/views/layouts/application.html.erb %>
|
107
|
-
|
108
|
-
<img src="<%= asset_pack_path 'media/images/calendar.png' %>" />
|
109
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
110
|
-
|
111
|
-
<%= image_pack_tag 'media/images/calendar.png' %>
|
112
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
113
|
-
|
114
|
-
<%# no path resolves to default 'images' folder: %>
|
115
|
-
<%= image_pack_tag 'calendar.png' %>
|
116
|
-
<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
|
117
|
-
```
|
118
|
-
|
119
|
-
Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](https://github.com/rails/webpacker/blob/0b86cadb5ed921e2c1538382e72a236ec30a5d97/test/helper_test.rb#L37).
|