webpacker 3.0.2 → 3.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintignore +1 -0
- data/.travis.yml +10 -0
- data/CHANGELOG.md +110 -0
- data/Gemfile.lock +69 -67
- data/MIT-LICENSE +1 -1
- data/README.md +86 -30
- data/docs/assets.md +4 -4
- data/docs/cloud9.md +310 -0
- data/docs/css.md +32 -3
- data/docs/deployment.md +42 -4
- data/docs/docker.md +49 -0
- data/docs/env.md +5 -5
- data/docs/folder-structure.md +2 -2
- data/docs/testing.md +14 -34
- data/docs/troubleshooting.md +40 -4
- data/docs/typescript.md +2 -2
- data/docs/webpack-dev-server.md +21 -4
- data/docs/webpack.md +103 -25
- data/gemfiles/Gemfile-rails-edge +13 -0
- data/gemfiles/Gemfile-rails.4.2.x +10 -0
- data/gemfiles/Gemfile-rails.5.0.x +10 -0
- data/gemfiles/Gemfile-rails.5.1.x +10 -0
- data/lib/install/angular.rb +5 -5
- data/lib/install/config/webpacker.yml +7 -0
- data/lib/install/elm.rb +7 -7
- data/lib/install/examples/vue/hello_vue.js +30 -4
- data/lib/install/react.rb +5 -5
- data/lib/install/template.rb +19 -9
- data/lib/install/vue.rb +4 -4
- data/lib/tasks/installers.rake +2 -2
- data/lib/tasks/webpacker.rake +7 -6
- data/lib/tasks/webpacker/check_binstubs.rake +3 -3
- data/lib/tasks/webpacker/compile.rake +15 -8
- data/lib/tasks/webpacker/install.rake +4 -4
- data/lib/tasks/webpacker/verify_install.rake +1 -1
- data/lib/webpacker/compiler.rb +6 -6
- data/lib/webpacker/dev_server.rb +2 -2
- data/lib/webpacker/dev_server_proxy.rb +2 -1
- data/lib/webpacker/dev_server_runner.rb +4 -4
- data/lib/webpacker/helper.rb +3 -3
- data/lib/webpacker/manifest.rb +2 -2
- data/lib/webpacker/railtie.rb +41 -2
- data/lib/webpacker/runner.rb +1 -1
- data/lib/webpacker/version.rb +1 -1
- data/package.json +29 -21
- data/package/asset_host.js +4 -5
- data/package/config.js +7 -1
- data/package/config_types/__tests__/config_list.js +123 -0
- data/package/config_types/__tests__/config_object.js +43 -0
- data/package/config_types/config_list.js +83 -0
- data/package/config_types/config_object.js +55 -0
- data/package/config_types/index.js +7 -0
- data/package/environment.js +64 -40
- data/package/environments/development.js +31 -34
- data/package/environments/production.js +14 -11
- data/package/index.js +7 -2
- data/package/{loaders → rules}/babel.js +6 -4
- data/package/{loaders → rules}/coffee.js +3 -1
- data/package/rules/css.js +39 -0
- data/package/rules/elm.js +23 -0
- data/package/rules/erb.js +11 -0
- data/package/{loaders → rules}/file.js +1 -1
- data/package/rules/index.js +23 -0
- data/package/rules/sass.js +15 -0
- data/package/{loaders → rules}/typescript.js +3 -1
- data/package/rules/url.js +13 -0
- data/package/rules/vue.js +13 -0
- data/package/utils/__tests__/deep_assign.js +11 -0
- data/package/utils/__tests__/deep_merge.js +10 -0
- data/package/utils/__tests__/objectify.js +9 -0
- data/package/utils/deep_assign.js +22 -0
- data/package/utils/deep_merge.js +23 -0
- data/package/utils/helpers.js +32 -0
- data/package/utils/objectify.js +4 -0
- data/test/command_test.rb +1 -1
- data/test/compiler_test.rb +5 -1
- data/test/configuration_test.rb +1 -1
- data/test/dev_server_test.rb +1 -1
- data/test/helper_test.rb +15 -10
- data/test/manifest_test.rb +1 -1
- data/test/rake_tasks_test.rb +29 -0
- data/test/test_app/Rakefile +3 -0
- data/test/test_app/config/application.rb +11 -0
- data/test/test_app/config/environment.rb +4 -0
- data/test/{webpacker_test_helper.rb → test_helper.rb} +3 -14
- data/webpacker.gemspec +1 -1
- data/yarn.lock +1552 -829
- metadata +43 -16
- data/package/loaders/elm.js +0 -19
- data/package/loaders/erb.js +0 -9
- data/package/loaders/style.js +0 -31
- data/package/loaders/vue.js +0 -12
- data/test/test_app/config/secrets.yml +0 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: af4f2c2e5c0ce6a48627f89a802d979a022a9421
|
4
|
+
data.tar.gz: afccd5805bcf36333c987972ffcdcc5952fd8ef6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 936d628434e53e52069bad3578e333051994563ddd4872c88ac35394189640e90bf6cd7f7a0e27eb39faa4bc20e263a9dc287a6beb0a7fca9f27f09d9b3ce5d0
|
7
|
+
data.tar.gz: 1cc1a5def4986d5b6c0037883939b454e2fb53a255e5a79ac2128a4363edc48068c086e2388c901c9e9b7a731874502c0786950ee74ae43a7e0b4c607571e38d
|
data/.eslintignore
CHANGED
data/.travis.yml
CHANGED
@@ -4,6 +4,12 @@ rvm:
|
|
4
4
|
- 2.2.8
|
5
5
|
- 2.3.5
|
6
6
|
- 2.4.2
|
7
|
+
- ruby-head
|
8
|
+
gemfile:
|
9
|
+
- gemfiles/Gemfile-rails.4.2.x
|
10
|
+
- gemfiles/Gemfile-rails.5.0.x
|
11
|
+
- gemfiles/Gemfile-rails.5.1.x
|
12
|
+
- gemfiles/Gemfile-rails-edge
|
7
13
|
cache:
|
8
14
|
bundler: true
|
9
15
|
directories:
|
@@ -18,5 +24,9 @@ install:
|
|
18
24
|
- yarn
|
19
25
|
script:
|
20
26
|
- yarn lint
|
27
|
+
- yarn test
|
21
28
|
- bundle exec rubocop
|
22
29
|
- bundle exec rake test
|
30
|
+
matrix:
|
31
|
+
allow_failures:
|
32
|
+
- gemfile: gemfiles/Gemfile-rails-edge
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,113 @@
|
|
1
|
+
## [3.1.0] - 2017-10-04
|
2
|
+
|
3
|
+
|
4
|
+
### Added (npm module)
|
5
|
+
|
6
|
+
- Expose base config from environment
|
7
|
+
|
8
|
+
```js
|
9
|
+
environment.config.set('resolve.extensions', ['.foo', '.bar'])
|
10
|
+
environment.config.set('output.filename', '[name].js')
|
11
|
+
environment.config.delete('output.chunkFilename')
|
12
|
+
environment.config.get('resolve')
|
13
|
+
environment.config.merge({ output: {
|
14
|
+
filename: '[name].js'
|
15
|
+
}
|
16
|
+
})
|
17
|
+
```
|
18
|
+
|
19
|
+
- Expose new API's for loaders and plugins to insert at position
|
20
|
+
|
21
|
+
```js
|
22
|
+
const jsonLoader = {
|
23
|
+
test: /\.json$/,
|
24
|
+
exclude: /node_modules/,
|
25
|
+
loader: 'json-loader'
|
26
|
+
}
|
27
|
+
|
28
|
+
environment.loaders.append('json', jsonLoader)
|
29
|
+
environment.loaders.prepend('json', jsonLoader)
|
30
|
+
environment.loaders.insert('json', jsonLoader, { after: 'style' } )
|
31
|
+
environment.loaders.insert('json', jsonLoader, { before: 'babel' } )
|
32
|
+
|
33
|
+
// Update a plugin
|
34
|
+
const manifestPlugin = environment.plugins.get('Manifest')
|
35
|
+
manifestPlugin.opts.writeToFileEmit = false
|
36
|
+
|
37
|
+
// Update coffee loader to use coffeescript 2
|
38
|
+
const babelLoader = environment.loaders.get('babel')
|
39
|
+
environment.loaders.insert('coffee', {
|
40
|
+
test: /\.coffee(\.erb)?$/,
|
41
|
+
use: babelLoader.use.concat(['coffee-loader'])
|
42
|
+
}, { before: 'json' })
|
43
|
+
```
|
44
|
+
|
45
|
+
- Expose `resolve.modules` paths like loaders and plugins
|
46
|
+
|
47
|
+
```js
|
48
|
+
environment.resolvedModules.append('vendor', 'vendor')
|
49
|
+
```
|
50
|
+
|
51
|
+
- Enable sourcemaps in `style` and `css` loader
|
52
|
+
|
53
|
+
- Separate `css` and `sass` loader for easier configuration. `style` loader is now
|
54
|
+
`css` loader, which resolves `.css` files and `sass` loader resolves `.scss` and `.sass`
|
55
|
+
files.
|
56
|
+
|
57
|
+
```js
|
58
|
+
// Enable css modules with sass loader
|
59
|
+
const sassLoader = environment.loaders.get('sass')
|
60
|
+
const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')
|
61
|
+
|
62
|
+
cssLoader.options = Object.assign(cssLoader.options, {
|
63
|
+
modules: true,
|
64
|
+
localIdentName: '[path][name]__[local]--[hash:base64:5]'
|
65
|
+
})
|
66
|
+
```
|
67
|
+
|
68
|
+
- Expose rest of configurable dev server options from webpacker.yml
|
69
|
+
|
70
|
+
```yml
|
71
|
+
quiet: false
|
72
|
+
headers:
|
73
|
+
'Access-Control-Allow-Origin': '*'
|
74
|
+
watch_options:
|
75
|
+
ignored: /node_modules/
|
76
|
+
```
|
77
|
+
|
78
|
+
- `pretty` option to disable/enable color and progress output when running dev server
|
79
|
+
|
80
|
+
```yml
|
81
|
+
dev_server:
|
82
|
+
pretty: false
|
83
|
+
```
|
84
|
+
|
85
|
+
- Enforce deterministic loader order in desc order, starts processing from top to bottom
|
86
|
+
|
87
|
+
- Enforce the entire path of all required modules match the exact case of the actual path on disk using [case sensitive paths plugin](https://github.com/Urthen/case-sensitive-paths-webpack-plugin).
|
88
|
+
|
89
|
+
- Add url loader to process and embed smaller static files
|
90
|
+
|
91
|
+
|
92
|
+
### Removed
|
93
|
+
|
94
|
+
- resolve url loader [#1042](https://github.com/rails/webpacker/issues/1042)
|
95
|
+
|
96
|
+
### Added (Gem)
|
97
|
+
|
98
|
+
- Allow skipping webpacker compile using an env variable
|
99
|
+
|
100
|
+
```bash
|
101
|
+
WEBPACKER_PRECOMPILE=no|false|n|f
|
102
|
+
WEBPACKER_PRECOMPILE=false bundle exec rails assets:precompile
|
103
|
+
```
|
104
|
+
|
105
|
+
- Use `WEBPACKER_ASSET_HOST` instead of `ASSET_HOST` for CDN
|
106
|
+
|
107
|
+
- Alias `webpacker:compile` task to `assets:precompile` if is not defined so it works
|
108
|
+
without sprockets
|
109
|
+
|
110
|
+
|
1
111
|
## [3.0.2] - 2017-10-04
|
2
112
|
|
3
113
|
### Added
|
data/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
webpacker (3.0
|
4
|
+
webpacker (3.1.0)
|
5
5
|
activesupport (>= 4.2)
|
6
6
|
rack-proxy (>= 0.6.1)
|
7
7
|
railties (>= 4.2)
|
@@ -9,118 +9,120 @@ PATH
|
|
9
9
|
GEM
|
10
10
|
remote: https://rubygems.org/
|
11
11
|
specs:
|
12
|
-
actioncable (5.
|
13
|
-
actionpack (= 5.
|
14
|
-
nio4r (~>
|
12
|
+
actioncable (5.1.4)
|
13
|
+
actionpack (= 5.1.4)
|
14
|
+
nio4r (~> 2.0)
|
15
15
|
websocket-driver (~> 0.6.1)
|
16
|
-
actionmailer (5.
|
17
|
-
actionpack (= 5.
|
18
|
-
actionview (= 5.
|
19
|
-
activejob (= 5.
|
16
|
+
actionmailer (5.1.4)
|
17
|
+
actionpack (= 5.1.4)
|
18
|
+
actionview (= 5.1.4)
|
19
|
+
activejob (= 5.1.4)
|
20
20
|
mail (~> 2.5, >= 2.5.4)
|
21
21
|
rails-dom-testing (~> 2.0)
|
22
|
-
actionpack (5.
|
23
|
-
actionview (= 5.
|
24
|
-
activesupport (= 5.
|
22
|
+
actionpack (5.1.4)
|
23
|
+
actionview (= 5.1.4)
|
24
|
+
activesupport (= 5.1.4)
|
25
25
|
rack (~> 2.0)
|
26
|
-
rack-test (
|
26
|
+
rack-test (>= 0.6.3)
|
27
27
|
rails-dom-testing (~> 2.0)
|
28
28
|
rails-html-sanitizer (~> 1.0, >= 1.0.2)
|
29
|
-
actionview (5.
|
30
|
-
activesupport (= 5.
|
29
|
+
actionview (5.1.4)
|
30
|
+
activesupport (= 5.1.4)
|
31
31
|
builder (~> 3.1)
|
32
|
-
|
32
|
+
erubi (~> 1.4)
|
33
33
|
rails-dom-testing (~> 2.0)
|
34
|
-
rails-html-sanitizer (~> 1.0, >= 1.0.
|
35
|
-
activejob (5.
|
36
|
-
activesupport (= 5.
|
34
|
+
rails-html-sanitizer (~> 1.0, >= 1.0.3)
|
35
|
+
activejob (5.1.4)
|
36
|
+
activesupport (= 5.1.4)
|
37
37
|
globalid (>= 0.3.6)
|
38
|
-
activemodel (5.
|
39
|
-
activesupport (= 5.
|
40
|
-
activerecord (5.
|
41
|
-
activemodel (= 5.
|
42
|
-
activesupport (= 5.
|
43
|
-
arel (~>
|
44
|
-
activesupport (5.
|
38
|
+
activemodel (5.1.4)
|
39
|
+
activesupport (= 5.1.4)
|
40
|
+
activerecord (5.1.4)
|
41
|
+
activemodel (= 5.1.4)
|
42
|
+
activesupport (= 5.1.4)
|
43
|
+
arel (~> 8.0)
|
44
|
+
activesupport (5.1.4)
|
45
45
|
concurrent-ruby (~> 1.0, >= 1.0.2)
|
46
46
|
i18n (~> 0.7)
|
47
47
|
minitest (~> 5.1)
|
48
48
|
tzinfo (~> 1.1)
|
49
|
-
arel (
|
49
|
+
arel (8.0.0)
|
50
50
|
ast (2.3.0)
|
51
51
|
builder (3.2.3)
|
52
|
-
byebug (9.0
|
52
|
+
byebug (9.1.0)
|
53
53
|
concurrent-ruby (1.0.5)
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
54
|
+
crass (1.0.2)
|
55
|
+
erubi (1.6.1)
|
56
|
+
globalid (0.4.0)
|
57
|
+
activesupport (>= 4.2.0)
|
58
|
+
i18n (0.8.6)
|
59
|
+
loofah (2.1.1)
|
60
|
+
crass (~> 1.0.2)
|
59
61
|
nokogiri (>= 1.5.9)
|
60
|
-
mail (2.6.
|
62
|
+
mail (2.6.6)
|
61
63
|
mime-types (>= 1.16, < 4)
|
62
|
-
method_source (0.
|
64
|
+
method_source (0.9.0)
|
63
65
|
mime-types (3.1)
|
64
66
|
mime-types-data (~> 3.2015)
|
65
67
|
mime-types-data (3.2016.0521)
|
66
|
-
mini_portile2 (2.
|
67
|
-
minitest (5.10.
|
68
|
-
nio4r (
|
69
|
-
nokogiri (1.
|
70
|
-
mini_portile2 (~> 2.
|
68
|
+
mini_portile2 (2.3.0)
|
69
|
+
minitest (5.10.3)
|
70
|
+
nio4r (2.1.0)
|
71
|
+
nokogiri (1.8.1)
|
72
|
+
mini_portile2 (~> 2.3.0)
|
71
73
|
parallel (1.12.0)
|
72
74
|
parser (2.4.0.0)
|
73
75
|
ast (~> 2.2)
|
74
76
|
powerpack (0.1.1)
|
75
|
-
rack (2.0.
|
76
|
-
rack-proxy (0.6.
|
77
|
+
rack (2.0.3)
|
78
|
+
rack-proxy (0.6.2)
|
77
79
|
rack
|
78
|
-
rack-test (0.
|
79
|
-
rack (>= 1.0)
|
80
|
-
rails (5.
|
81
|
-
actioncable (= 5.
|
82
|
-
actionmailer (= 5.
|
83
|
-
actionpack (= 5.
|
84
|
-
actionview (= 5.
|
85
|
-
activejob (= 5.
|
86
|
-
activemodel (= 5.
|
87
|
-
activerecord (= 5.
|
88
|
-
activesupport (= 5.
|
89
|
-
bundler (>= 1.3.0
|
90
|
-
railties (= 5.
|
80
|
+
rack-test (0.7.0)
|
81
|
+
rack (>= 1.0, < 3)
|
82
|
+
rails (5.1.4)
|
83
|
+
actioncable (= 5.1.4)
|
84
|
+
actionmailer (= 5.1.4)
|
85
|
+
actionpack (= 5.1.4)
|
86
|
+
actionview (= 5.1.4)
|
87
|
+
activejob (= 5.1.4)
|
88
|
+
activemodel (= 5.1.4)
|
89
|
+
activerecord (= 5.1.4)
|
90
|
+
activesupport (= 5.1.4)
|
91
|
+
bundler (>= 1.3.0)
|
92
|
+
railties (= 5.1.4)
|
91
93
|
sprockets-rails (>= 2.0.0)
|
92
|
-
rails-dom-testing (2.0.
|
93
|
-
activesupport (>= 4.2.0
|
94
|
-
nokogiri (
|
94
|
+
rails-dom-testing (2.0.3)
|
95
|
+
activesupport (>= 4.2.0)
|
96
|
+
nokogiri (>= 1.6)
|
95
97
|
rails-html-sanitizer (1.0.3)
|
96
98
|
loofah (~> 2.0)
|
97
|
-
railties (5.
|
98
|
-
actionpack (= 5.
|
99
|
-
activesupport (= 5.
|
99
|
+
railties (5.1.4)
|
100
|
+
actionpack (= 5.1.4)
|
101
|
+
activesupport (= 5.1.4)
|
100
102
|
method_source
|
101
103
|
rake (>= 0.8.7)
|
102
104
|
thor (>= 0.18.1, < 2.0)
|
103
105
|
rainbow (2.2.2)
|
104
106
|
rake
|
105
|
-
rake (12.
|
106
|
-
rubocop (0.
|
107
|
+
rake (12.1.0)
|
108
|
+
rubocop (0.50.0)
|
107
109
|
parallel (~> 1.10)
|
108
110
|
parser (>= 2.3.3.1, < 3.0)
|
109
111
|
powerpack (~> 0.1)
|
110
|
-
rainbow (>=
|
112
|
+
rainbow (>= 2.2.2, < 3.0)
|
111
113
|
ruby-progressbar (~> 1.7)
|
112
114
|
unicode-display_width (~> 1.0, >= 1.0.1)
|
113
|
-
ruby-progressbar (1.
|
115
|
+
ruby-progressbar (1.9.0)
|
114
116
|
sprockets (3.7.1)
|
115
117
|
concurrent-ruby (~> 1.0)
|
116
118
|
rack (> 1, < 3)
|
117
|
-
sprockets-rails (3.2.
|
119
|
+
sprockets-rails (3.2.1)
|
118
120
|
actionpack (>= 4.0)
|
119
121
|
activesupport (>= 4.0)
|
120
122
|
sprockets (>= 3.0.0)
|
121
|
-
thor (0.
|
123
|
+
thor (0.20.0)
|
122
124
|
thread_safe (0.3.6)
|
123
|
-
tzinfo (1.2.
|
125
|
+
tzinfo (1.2.3)
|
124
126
|
thread_safe (~> 0.1)
|
125
127
|
unicode-display_width (1.3.0)
|
126
128
|
websocket-driver (0.6.5)
|
data/MIT-LICENSE
CHANGED
data/README.md
CHANGED
@@ -5,9 +5,9 @@
|
|
5
5
|
[![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://github.com/rails/webpacker)
|
6
6
|
|
7
7
|
Webpacker makes it easy to use the JavaScript pre-processor and bundler
|
8
|
-
[
|
8
|
+
[webpack 3.x.x+](https://webpack.js.org/)
|
9
9
|
to manage application-like JavaScript in Rails. It coexists with the asset pipeline,
|
10
|
-
as the primary purpose for
|
10
|
+
as the primary purpose for webpack is app-like JavaScript, not images, CSS, or
|
11
11
|
even JavaScript Sprinkles (that all continues to live in app/assets).
|
12
12
|
|
13
13
|
However, it is possible to use Webpacker for CSS, images and fonts assets as well,
|
@@ -20,10 +20,11 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
20
20
|
- [Prerequisites](#prerequisites)
|
21
21
|
- [Features](#features)
|
22
22
|
- [Installation](#installation)
|
23
|
-
- [Upgrading](#upgrading)
|
24
23
|
- [Usage](#usage)
|
25
24
|
- [Development](#development)
|
26
|
-
- [
|
25
|
+
- [webpack configuration](#webpack-configuration)
|
26
|
+
- [Upgrading](#upgrading)
|
27
|
+
- [Yarn Integrity](#yarn-integrity)
|
27
28
|
- [Integrations](#integrations)
|
28
29
|
- [React](#react)
|
29
30
|
- [Angular with TypeScript](#angular-with-typescript)
|
@@ -49,10 +50,10 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
49
50
|
|
50
51
|
## Features
|
51
52
|
|
52
|
-
* [
|
53
|
+
* [webpack 3.x.x](https://webpack.js.org/)
|
53
54
|
* ES6 with [babel](https://babeljs.io/)
|
54
55
|
* Automatic code splitting using multiple entry points
|
55
|
-
* Stylesheets -
|
56
|
+
* Stylesheets - Sass and CSS
|
56
57
|
* Images and fonts
|
57
58
|
* PostCSS - Auto-Prefixer
|
58
59
|
* Asset compression, source-maps, and minification
|
@@ -82,7 +83,7 @@ gem 'webpacker', '~> 3.0'
|
|
82
83
|
gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
|
83
84
|
```
|
84
85
|
|
85
|
-
and finally, run following to install
|
86
|
+
and finally, run following to install Webpacker:
|
86
87
|
|
87
88
|
```bash
|
88
89
|
bundle
|
@@ -108,7 +109,7 @@ app/javascript:
|
|
108
109
|
└── logo.svg
|
109
110
|
```
|
110
111
|
|
111
|
-
You can then link the
|
112
|
+
You can then link the JavaScript pack in Rails view using `javascript_pack_tag` helper.
|
112
113
|
If you have styles imported in your pack file, you can link using `stylesheet_pack_tag`:
|
113
114
|
|
114
115
|
```erb
|
@@ -159,7 +160,12 @@ Once you start this development server, Webpacker will automatically start proxy
|
|
159
160
|
webpack asset requests to this server. When you stop the server, it'll revert to
|
160
161
|
on-demand compilation again.
|
161
162
|
|
162
|
-
You can use environment variables as options supported by
|
163
|
+
You can use environment variables as options supported by
|
164
|
+
[webpack-dev-server](https://webpack.js.org/configuration/dev-server/) in the
|
165
|
+
form `WEBPACKER_DEV_SERVER_<OPTION>`. Please note that these environment
|
166
|
+
variables will always take precedence over the ones already set in the
|
167
|
+
configuration file, and that the _same_ environment variables must
|
168
|
+
be available to the `rails server` process.
|
163
169
|
|
164
170
|
```bash
|
165
171
|
WEBPACKER_DEV_SERVER_HOST=example.com WEBPACKER_DEV_SERVER_INLINE=true WEBPACKER_DEV_SERVER_HOT=false ./bin/webpack-dev-server
|
@@ -173,20 +179,43 @@ you can set the `host` when running `./bin/webpack-dev-server` binstub:
|
|
173
179
|
WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
|
174
180
|
```
|
175
181
|
|
182
|
+
**Note:** You need to allow webpack-dev-server host as allowed origin for `connect-src` if you are running your application in a restrict CSP environment like Rails 5.2+. This can be done in Rails 5.2+ for development environment in the CSP initializer `config/initializers/content_security_policy.rb` with a snippet like this:
|
183
|
+
|
184
|
+
```ruby
|
185
|
+
p.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035' if Rails.env.development?
|
186
|
+
```
|
187
|
+
|
176
188
|
**Note:** Don't forget to prefix `ruby` when running these binstubs on windows
|
177
189
|
|
178
|
-
###
|
190
|
+
### webpack configuration
|
179
191
|
|
180
|
-
See [docs/
|
192
|
+
See [docs/webpack](docs/webpack.md) for modifying webpack configuration and loaders.
|
181
193
|
|
182
194
|
|
183
195
|
### Upgrading
|
184
196
|
|
185
|
-
You can run following commands to upgrade
|
197
|
+
You can run following commands to upgrade Webpacker to the latest stable version, this involves upgrading the gem and related npm modules:
|
186
198
|
|
187
199
|
```bash
|
188
200
|
bundle update webpacker
|
189
201
|
yarn upgrade @rails/webpacker --latest
|
202
|
+
yarn upgrade webpack-dev-server --latest
|
203
|
+
```
|
204
|
+
|
205
|
+
### Yarn Integrity
|
206
|
+
|
207
|
+
By default in development, webpacker runs a yarn integrity check to ensure that all local npm 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 and you will be asked to upgrade your local npm packages by running `yarn install`.
|
208
|
+
|
209
|
+
To turn off this option, you will need to override the default by adding a new config options to your Rails development environment configuration file (`config/environment/development.rb`):
|
210
|
+
|
211
|
+
```
|
212
|
+
config.webpacker.check_yarn_integrity = false
|
213
|
+
```
|
214
|
+
|
215
|
+
You may also turn on this option by adding the config option to any Rails environment configuration file:
|
216
|
+
|
217
|
+
```
|
218
|
+
config.webpacker.check_yarn_integrity = true
|
190
219
|
```
|
191
220
|
|
192
221
|
## Integrations
|
@@ -205,9 +234,9 @@ rails new myapp --webpack=react
|
|
205
234
|
```
|
206
235
|
|
207
236
|
(or run `bundle exec rails webpacker:install:react` in a existing Rails app already
|
208
|
-
setup with
|
237
|
+
setup with Webpacker).
|
209
238
|
|
210
|
-
The installer will add all relevant dependencies using
|
239
|
+
The installer will add all relevant dependencies using Yarn, any changes
|
211
240
|
to the configuration files and an example React component to your
|
212
241
|
project in `app/javascript/packs` so that you can experiment with React right away.
|
213
242
|
|
@@ -223,13 +252,30 @@ rails new myapp --webpack=angular
|
|
223
252
|
```
|
224
253
|
|
225
254
|
(or run `bundle exec rails webpacker:install:angular` on a Rails app already
|
226
|
-
setup with
|
255
|
+
setup with Webpacker).
|
227
256
|
|
228
|
-
The installer will add TypeScript and Angular core libraries using
|
257
|
+
The installer will add TypeScript and Angular core libraries using Yarn plus
|
229
258
|
any changes to the configuration files. An example component is written in
|
230
259
|
TypeScript will also be added to your project in `app/javascript` so that
|
231
260
|
you can experiment with Angular right away.
|
232
261
|
|
262
|
+
By default Angular uses a JIT compiler for development environment, this
|
263
|
+
compiler is not compatible with restrictive CSP (Content Security
|
264
|
+
Policy) environments like Rails 5.2+. You can use Angular AOT compiler
|
265
|
+
in development with the [@ngtools/webpack](https://www.npmjs.com/package/@ngtools/webpack#usage) plugin.
|
266
|
+
|
267
|
+
Alternatively if you're using Rails 5.2+ you can enable `unsafe-eval` rule for
|
268
|
+
development environment, this can be done in the `config/initializers/content_security_policy.rb`
|
269
|
+
with the following configuration:
|
270
|
+
|
271
|
+
```ruby
|
272
|
+
if Rails.env.development?
|
273
|
+
p.script_src :self, :https, :unsafe_eval
|
274
|
+
else
|
275
|
+
p.script_src :self, :https
|
276
|
+
end
|
277
|
+
```
|
278
|
+
|
233
279
|
|
234
280
|
### Vue
|
235
281
|
|
@@ -240,13 +286,26 @@ new Rails 5.1+ app using `--webpack=vue` option:
|
|
240
286
|
# Rails 5.1+
|
241
287
|
rails new myapp --webpack=vue
|
242
288
|
```
|
243
|
-
(or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with
|
289
|
+
(or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with Webpacker).
|
244
290
|
|
245
|
-
The installer will add Vue and required libraries using
|
291
|
+
The installer will add Vue and required libraries using Yarn plus
|
246
292
|
any changes to the configuration files. An example component will
|
247
293
|
also be added to your project in `app/javascript` so that you can
|
248
294
|
experiment Vue right away.
|
249
295
|
|
296
|
+
If you're using Rails 5.2+ you need to enable `unsafe-eval` rule for development environment,
|
297
|
+
this can be done in the `config/initializers/content_security_policy.rb` with the following
|
298
|
+
configuration:
|
299
|
+
|
300
|
+
```ruby
|
301
|
+
if Rails.env.development?
|
302
|
+
p.script_src :self, :https, :unsafe_eval
|
303
|
+
else
|
304
|
+
p.script_src :self, :https
|
305
|
+
end
|
306
|
+
```
|
307
|
+
You can read more this in [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
|
308
|
+
|
250
309
|
|
251
310
|
### Elm
|
252
311
|
|
@@ -258,7 +317,7 @@ new Rails 5.1+ app using `--webpack=elm` option:
|
|
258
317
|
rails new myapp --webpack=elm
|
259
318
|
```
|
260
319
|
|
261
|
-
(or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with
|
320
|
+
(or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
|
262
321
|
|
263
322
|
The Elm library and core packages will be added via Yarn and Elm itself.
|
264
323
|
An example `Main.elm` app will also be added to your project in `app/javascript`
|
@@ -267,15 +326,15 @@ so that you can experiment with Elm right away.
|
|
267
326
|
|
268
327
|
## Paths
|
269
328
|
|
270
|
-
By default,
|
271
|
-
app files and compiled webpack bundles will go in your
|
329
|
+
By default, Webpacker ships with simple conventions for where the JavaScript
|
330
|
+
app files and compiled webpack bundles will go in your Rails app,
|
272
331
|
but all these options are configurable from `config/webpacker.yml` file.
|
273
332
|
|
274
|
-
The configuration for what
|
333
|
+
The configuration for what webpack is supposed to compile by default rests
|
275
334
|
on the convention that every file in `app/javascript/packs/*`**(default)**
|
276
335
|
or whatever path you set for `source_entry_path` in the `webpacker.yml` configuration
|
277
|
-
is turned into their own output files (or entry points, as
|
278
|
-
an entry file. As a rule thumb, put all files
|
336
|
+
is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside `packs` directory that you do not want to be
|
337
|
+
an entry file. As a rule of thumb, put all files you want to link in your views inside
|
279
338
|
"packs" directory and keep everything else under `app/javascript`.
|
280
339
|
|
281
340
|
Suppose you want to change the source directory from `app/javascript`
|
@@ -303,7 +362,7 @@ If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no ou
|
|
303
362
|
|
304
363
|
### Resolved
|
305
364
|
|
306
|
-
If you are adding
|
365
|
+
If you are adding Webpacker to an existing app that has most of the assets inside
|
307
366
|
`app/assets` or inside an engine and you want to share that
|
308
367
|
with webpack modules then you can use `resolved_paths`
|
309
368
|
option available in `config/webpacker.yml`, which lets you
|
@@ -330,7 +389,7 @@ whole parent directory if you just need to reference one or two modules
|
|
330
389
|
|
331
390
|
By default, the lazy compilation is cached until a file is changed under
|
332
391
|
tracked paths. You can configure the paths tracked
|
333
|
-
by adding new paths to `watched_paths` array, much like
|
392
|
+
by adding new paths to `watched_paths` array, much like Rails `autoload_paths`:
|
334
393
|
|
335
394
|
```rb
|
336
395
|
# config/initializers/webpacker.rb
|
@@ -341,10 +400,7 @@ Webpacker::Compiler.watched_paths << 'bower_components'
|
|
341
400
|
|
342
401
|
## Deployment
|
343
402
|
|
344
|
-
Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. If you are not using
|
345
|
-
can manually trigger `NODE_ENV=production bundle exec rails webpacker:compile`
|
346
|
-
during your app deploy.
|
347
|
-
|
403
|
+
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`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task.
|
348
404
|
|
349
405
|
## Docs
|
350
406
|
|