webpacker 4.1.0 → 5.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.node-version +1 -1
- data/.travis.yml +7 -20
- data/CHANGELOG.md +35 -0
- data/Gemfile +1 -0
- data/Gemfile.lock +8 -5
- data/README.md +45 -260
- data/docs/css.md +3 -4
- data/docs/deployment.md +2 -2
- data/docs/docker.md +17 -17
- data/docs/engines.md +13 -0
- data/docs/integrations.md +220 -0
- data/docs/typescript.md +2 -3
- data/lib/install/loaders/svelte.js +2 -2
- data/lib/install/template.rb +2 -2
- data/lib/tasks/webpacker/check_node.rake +14 -7
- data/lib/tasks/webpacker/check_yarn.rake +16 -9
- data/lib/tasks/webpacker/clean.rake +16 -6
- data/lib/tasks/webpacker/clobber.rake +8 -4
- data/lib/tasks/webpacker/compile.rake +1 -9
- data/lib/tasks/webpacker/yarn_install.rake +5 -16
- data/lib/webpacker.rb +8 -0
- data/lib/webpacker/commands.rb +45 -19
- data/lib/webpacker/dev_server_runner.rb +4 -4
- data/lib/webpacker/env.rb +1 -1
- data/lib/webpacker/manifest.rb +4 -4
- data/lib/webpacker/railtie.rb +3 -1
- data/lib/webpacker/version.rb +1 -1
- data/package.json +35 -35
- data/package/environments/__tests__/base.js +10 -0
- data/package/environments/base.js +12 -1
- data/package/environments/development.js +0 -4
- data/package/rules/sass.js +7 -1
- data/test/manifest_test.rb +37 -6
- data/test/rake_tasks_test.rb +11 -0
- data/test/test_app/app/javascript/packs/multi_entry.css +4 -0
- data/test/test_app/app/javascript/packs/multi_entry.js +4 -0
- data/webpacker.gemspec +4 -3
- data/yarn.lock +2624 -1544
- metadata +28 -12
- data/gemfiles/Gemfile-rails.4.2.x +0 -9
- data/gemfiles/Gemfile-rails.5.0.x +0 -9
- data/gemfiles/Gemfile-rails.5.1.x +0 -9
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fcfdb400418dee827f9e717fab7d39291ca7a8c900cc82ce364553ae27eaf9d7
|
4
|
+
data.tar.gz: f05c4be4f53c4462be6c0d94ae35377f58da4bc27609fb904137c2ef4c8eb6ee
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fd03a035e7f9cb7462b60c66a9426c7b66377f8c571df82be2ed3a624bfe719531465241403290b06feff1391ac4423730e2df3b5510aed74ad8d56347f1e4bd
|
7
|
+
data.tar.gz: 492dbcb6e2793b357e3d4aee8ab99fa112300f57ed03c600b203dc445d47d2257493ebbab118efc9097f3d4f2d3a923f42cd9054b8e0e8c00060fcb8cfe0ee99
|
data/.node-version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
10.13.0
|
data/.travis.yml
CHANGED
@@ -2,21 +2,14 @@ language: ruby
|
|
2
2
|
dist: xenial
|
3
3
|
before_install:
|
4
4
|
- gem install rubygems-update && update_rubygems
|
5
|
-
|
6
|
-
# v1.17.3. This is just for Ruby 2.5 which ships with bundler 2.x on Travis
|
7
|
-
# CI while Ruby 2.6 does not.
|
8
|
-
# https://github.com/travis-ci/travis-rubies/issues/57#issuecomment-458981237
|
9
|
-
- yes | rvm @global do gem install bundler -v 1.17.3 || true
|
5
|
+
- yes | rvm @global do gem install bundler -v 2.1.4 || true
|
10
6
|
rvm:
|
11
|
-
- 2.
|
12
|
-
- 2.4.6
|
7
|
+
- 2.4.9
|
13
8
|
- 2.5.5
|
14
|
-
- 2.6.
|
9
|
+
- 2.6.5
|
10
|
+
- 2.7.0
|
15
11
|
- ruby-head
|
16
12
|
gemfile:
|
17
|
-
- gemfiles/Gemfile-rails.4.2.x
|
18
|
-
- gemfiles/Gemfile-rails.5.0.x
|
19
|
-
- gemfiles/Gemfile-rails.5.1.x
|
20
13
|
- gemfiles/Gemfile-rails.5.2.x
|
21
14
|
- gemfiles/Gemfile-rails.6.0.x
|
22
15
|
- gemfiles/Gemfile-rails-edge
|
@@ -28,7 +21,7 @@ cache:
|
|
28
21
|
|
29
22
|
install:
|
30
23
|
- bundle install --jobs 3 --retry 3
|
31
|
-
- nvm install
|
24
|
+
- nvm install 12
|
32
25
|
- node -v
|
33
26
|
- npm i -g yarn
|
34
27
|
- yarn
|
@@ -42,15 +35,9 @@ matrix:
|
|
42
35
|
- gemfile: gemfiles/Gemfile-rails-edge
|
43
36
|
- rvm: ruby-head
|
44
37
|
exclude:
|
45
|
-
- rvm: 2.
|
46
|
-
gemfile: gemfiles/Gemfile-rails-edge
|
47
|
-
- rvm: 2.4.6
|
38
|
+
- rvm: 2.4.9
|
48
39
|
gemfile: gemfiles/Gemfile-rails-edge
|
49
40
|
- rvm: 2.5.5
|
50
41
|
gemfile: gemfiles/Gemfile-rails-edge
|
51
|
-
- rvm:
|
52
|
-
gemfile: gemfiles/Gemfile-rails.4.2.x
|
53
|
-
- rvm: 2.3.8
|
54
|
-
gemfile: gemfiles/Gemfile-rails.6.0.x
|
55
|
-
- rvm: 2.4.6
|
42
|
+
- rvm: 2.4.9
|
56
43
|
gemfile: gemfiles/Gemfile-rails.6.0.x
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,40 @@
|
|
1
1
|
**Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0**
|
2
2
|
|
3
|
+
**Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
|
4
|
+
|
5
|
+
## [[5.0.1]](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0) - 2020-03-22
|
6
|
+
|
7
|
+
- Upgrade deps and fix sass loader config options bug [#2508](https://github.com/rails/webpacker/pull/2508)
|
8
|
+
|
9
|
+
## [[5.0.0]](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0) - 2020-03-22
|
10
|
+
|
11
|
+
- Bump minimum node version [#2428](https://github.com/rails/webpacker/pull/2428)
|
12
|
+
- Bump minimum ruby/rails version [#2415](https://github.com/rails/webpacker/pull/2415)
|
13
|
+
- Add support for multiple files per entry [#2476](https://github.com/rails/webpacker/pull/2476)
|
14
|
+
|
15
|
+
```js
|
16
|
+
entry: {
|
17
|
+
home: ['./home.js', './home.scss'],
|
18
|
+
account: ['./account.js', './account.scss']
|
19
|
+
}
|
20
|
+
```
|
21
|
+
|
22
|
+
You can now have two entry files with same names inside packs folder, `home.scss` and `home.js`
|
23
|
+
|
24
|
+
And, other minor fixes, please see a list of changes [here](https://github.com/rails/webpacker/compare/v4.2.2...v5.0.0)
|
25
|
+
|
26
|
+
## [[4.2.2]](https://github.com/rails/webpacker/compare/v4.2.1...v4.2.2) - 2019-12-09
|
27
|
+
|
28
|
+
- Fixed issue with webpack clean task for nested assets [#2391](https://github.com/rails/webpacker/pull/2391)
|
29
|
+
|
30
|
+
## [[4.2.1]](https://github.com/rails/webpacker/compare/v4.2.0...v4.2.1) - 2019-12-09
|
31
|
+
|
32
|
+
- Fixed issue with webpack clean task [#2389](https://github.com/rails/webpacker/pull/2389)
|
33
|
+
|
34
|
+
## [[4.2.0]](https://github.com/rails/webpacker/compare/v4.1.0...v4.2.0) - 2019-11-12
|
35
|
+
|
36
|
+
- Fixed installer bug [#2366](https://github.com/rails/webpacker/pull/2366)
|
37
|
+
|
3
38
|
## [[4.1.0]](https://github.com/rails/webpacker/compare/v4.0.7...v4.1.0) - 2019-11-12
|
4
39
|
|
5
40
|
- Added favicon_pack_tag to generate favicon links [#2281](https://github.com/rails/webpacker/pull/2281)
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,10 +1,11 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
webpacker (
|
5
|
-
activesupport (>=
|
4
|
+
webpacker (5.0.1)
|
5
|
+
activesupport (>= 5.2)
|
6
6
|
rack-proxy (>= 0.6.1)
|
7
|
-
railties (>=
|
7
|
+
railties (>= 5.2)
|
8
|
+
semantic_range (>= 2.3.0)
|
8
9
|
|
9
10
|
GEM
|
10
11
|
remote: https://rubygems.org/
|
@@ -88,12 +89,12 @@ GEM
|
|
88
89
|
mini_portile2 (2.4.0)
|
89
90
|
minitest (5.13.0)
|
90
91
|
nio4r (2.5.2)
|
91
|
-
nokogiri (1.10.
|
92
|
+
nokogiri (1.10.8)
|
92
93
|
mini_portile2 (~> 2.4.0)
|
93
94
|
parallel (1.18.0)
|
94
95
|
parser (2.6.5.0)
|
95
96
|
ast (~> 2.4.0)
|
96
|
-
rack (2.0.
|
97
|
+
rack (2.0.8)
|
97
98
|
rack-proxy (0.6.5)
|
98
99
|
rack
|
99
100
|
rack-test (1.1.0)
|
@@ -136,6 +137,7 @@ GEM
|
|
136
137
|
rubocop-performance (1.3.0)
|
137
138
|
rubocop (>= 0.68.0)
|
138
139
|
ruby-progressbar (1.10.1)
|
140
|
+
semantic_range (2.3.0)
|
139
141
|
sprockets (4.0.0)
|
140
142
|
concurrent-ruby (~> 1.0)
|
141
143
|
rack (> 1, < 3)
|
@@ -165,6 +167,7 @@ DEPENDENCIES
|
|
165
167
|
rake (>= 11.1)
|
166
168
|
rubocop (< 0.69)
|
167
169
|
rubocop-performance
|
170
|
+
semantic_range
|
168
171
|
webpacker!
|
169
172
|
|
170
173
|
BUNDLED WITH
|
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%
|
5
|
-
[![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://
|
4
|
+
[![node.js](https://img.shields.io/badge/node-%3E%3D%2010.13.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
|
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)
|
@@ -29,14 +30,14 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
29
30
|
- [Upgrading](#upgrading)
|
30
31
|
- [Yarn Integrity](#yarn-integrity)
|
31
32
|
- [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)
|
33
|
+
- [React](./docs/integrations.md#react)
|
34
|
+
- [Angular with TypeScript](./docs/integrations.md#angular-with-typescript)
|
35
|
+
- [Vue](./docs/integrations.md#vue)
|
36
|
+
- [Elm](./docs/integrations.md#elm)
|
37
|
+
- [Stimulus](./docs/integrations.md#stimulus)
|
38
|
+
- [Svelte](./docs/integrations.md#svelte)
|
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
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
53
|
+
- Ruby 2.4+
|
54
|
+
- Rails 5.2+
|
55
|
+
- Node.js 10.13.0+
|
56
|
+
- Yarn 1.x+
|
58
57
|
|
59
58
|
## Features
|
60
59
|
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
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
|
|
@@ -127,8 +125,8 @@ app/javascript:
|
|
127
125
|
In `/packs/application.js`, include this at the top of the file:
|
128
126
|
|
129
127
|
```js
|
130
|
-
import
|
131
|
-
import
|
128
|
+
import 'core-js/stable'
|
129
|
+
import 'regenerator-runtime/runtime'
|
132
130
|
```
|
133
131
|
|
134
132
|
You can then link the JavaScript pack in Rails views using the `javascript_pack_tag` helper.
|
@@ -175,7 +173,6 @@ helper otherwise you will get duplicated chunks on the page.
|
|
175
173
|
**Note:** In order for your styles or static assets files to be available in your view,
|
176
174
|
you would need to link them in your "pack" or entry file.
|
177
175
|
|
178
|
-
|
179
176
|
### Development
|
180
177
|
|
181
178
|
Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`.
|
@@ -240,7 +237,6 @@ WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
|
|
240
237
|
|
241
238
|
See [docs/webpack](docs/webpack.md) for modifying webpack configuration and loaders.
|
242
239
|
|
243
|
-
|
244
240
|
### Custom Rails environments
|
245
241
|
|
246
242
|
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 +286,6 @@ bundle exec rails assets:precompile
|
|
290
286
|
bundle exec rails webpacker:compile
|
291
287
|
```
|
292
288
|
|
293
|
-
|
294
289
|
### Upgrading
|
295
290
|
|
296
291
|
You can run following commands to upgrade Webpacker to the latest stable version. This process involves upgrading the gem and related JavaScript packages:
|
@@ -322,230 +317,26 @@ development:
|
|
322
317
|
You may also turn on this feature by adding the config option for any Rails environment in `config/webpacker.yml`:
|
323
318
|
|
324
319
|
```yaml
|
325
|
-
|
320
|
+
check_yarn_integrity: true
|
326
321
|
```
|
327
322
|
|
328
323
|
## Integrations
|
329
324
|
|
330
|
-
Webpacker ships with basic out-of-the-box integration
|
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).
|
345
|
-
|
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.
|
349
|
-
|
350
|
-
|
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.
|
325
|
+
Webpacker ships with basic out-of-the-box integration. You can see a list of available commands/tasks by running `bundle exec rails webpacker`.
|
501
326
|
|
502
|
-
|
327
|
+
Included install integrations:
|
503
328
|
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
(
|
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.
|
329
|
+
- [React](./docs/integrations.md#React)
|
330
|
+
- [Angular with TypeScript](./docs/integrations.md#Angular-with-TypeScript)
|
331
|
+
- [Vue](./docs/integrations.md#Vue)
|
332
|
+
- [Elm](./docs/integrations.md#Elm)
|
333
|
+
- [Svelte](./docs/integrations.md#Svelte)
|
334
|
+
- [Stimulus](./docs/integrations.md#Stimulus)
|
335
|
+
- [CoffeeScript](./docs/integrations.md#CoffeeScript)
|
336
|
+
- [Typescript](./docs/integrations.md)
|
337
|
+
- [Erb](./docs/integrations.md#Erb)
|
548
338
|
|
339
|
+
See [Integrations](./docs/integrations.md) for further details.
|
549
340
|
|
550
341
|
## Paths
|
551
342
|
|
@@ -582,7 +373,6 @@ development:
|
|
582
373
|
|
583
374
|
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
375
|
|
585
|
-
|
586
376
|
### Resolved
|
587
377
|
|
588
378
|
If you are adding Webpacker to an existing app that has most of the assets inside
|
@@ -607,7 +397,6 @@ import 'images/rails.png'
|
|
607
397
|
will make the compilation slow, consider adding specific paths instead of
|
608
398
|
whole parent directory if you just need to reference one or two modules
|
609
399
|
|
610
|
-
|
611
400
|
### Watched
|
612
401
|
|
613
402
|
By default, the lazy compilation is cached until a file is changed under your
|
@@ -620,12 +409,10 @@ by adding new paths to `watched_paths` array. This is much like Rails' `autoload
|
|
620
409
|
Webpacker::Compiler.watched_paths << 'bower_components'
|
621
410
|
```
|
622
411
|
|
623
|
-
|
624
412
|
## Deployment
|
625
413
|
|
626
414
|
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
415
|
|
628
|
-
|
629
416
|
## Docs
|
630
417
|
|
631
418
|
- [Development](https://github.com/rails/webpacker#development)
|
@@ -633,9 +420,7 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
|
|
633
420
|
- [Webpack-dev-server](./docs/webpack-dev-server.md)
|
634
421
|
- [Environment Variables](./docs/env.md)
|
635
422
|
- [Folder Structure](./docs/folder-structure.md)
|
636
|
-
- [Assets](./docs/assets.md)
|
637
|
-
- [CSS, Sass and SCSS](./docs/css.md)
|
638
|
-
- [ES6](./docs/es6.md)
|
423
|
+
- [Assets](./docs/assets.md) - [CSS, Sass and SCSS](./docs/css.md) - [ES6](./docs/es6.md)
|
639
424
|
- [Props](./docs/props.md)
|
640
425
|
- [Typescript](./docs/typescript.md)
|
641
426
|
- [Yarn](./docs/yarn.md)
|
@@ -648,12 +433,12 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
|
|
648
433
|
- [Troubleshooting](./docs/troubleshooting.md)
|
649
434
|
- [v3 to v4 Upgrade Guide](./docs/v4-upgrade.md)
|
650
435
|
|
651
|
-
|
652
436
|
## Contributing
|
437
|
+
|
653
438
|
[![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)
|
654
439
|
|
655
440
|
We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
|
656
441
|
|
657
|
-
|
658
442
|
## License
|
443
|
+
|
659
444
|
Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).
|