webpacker 4.0.0.pre.3 → 4.0.0.rc.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 +6 -4
- data/CHANGELOG.md +38 -0
- data/CONTRIBUTING.md +33 -0
- data/Gemfile +1 -1
- data/Gemfile.lock +64 -59
- data/README.md +16 -4
- data/docs/assets.md +7 -4
- data/docs/css.md +51 -8
- data/docs/es6.md +1 -1
- data/docs/troubleshooting.md +1 -1
- data/docs/webpack.md +42 -1
- data/gemfiles/Gemfile-rails-edge +1 -1
- data/gemfiles/Gemfile-rails.4.2.x +1 -1
- data/gemfiles/Gemfile-rails.5.0.x +1 -1
- data/gemfiles/Gemfile-rails.5.1.x +1 -1
- data/gemfiles/Gemfile-rails.5.2.x +1 -1
- data/lib/install/coffee.rb +2 -2
- data/lib/install/config/babel.config.js +70 -0
- data/lib/install/config/postcss.config.js +12 -0
- data/lib/install/config/webpacker.yml +22 -0
- data/lib/install/elm.rb +2 -2
- data/lib/install/erb.rb +2 -2
- data/lib/install/examples/elm/Main.elm +5 -4
- data/lib/install/examples/elm/hello_elm.js +6 -2
- data/lib/install/examples/react/babel.config.js +83 -0
- data/lib/install/examples/vue/hello_vue.js +6 -4
- data/lib/install/loaders/typescript.js +8 -3
- data/lib/install/react.rb +6 -20
- data/lib/install/template.rb +5 -4
- data/lib/install/typescript.rb +3 -3
- data/lib/install/vue.rb +4 -4
- data/lib/tasks/webpacker/compile.rake +3 -5
- data/lib/tasks/webpacker/yarn_install.rake +1 -1
- data/lib/webpacker/compiler.rb +4 -13
- data/lib/webpacker/configuration.rb +8 -0
- data/lib/webpacker/dev_server.rb +0 -9
- data/lib/webpacker/dev_server_runner.rb +12 -5
- data/lib/webpacker/helper.rb +10 -14
- data/lib/webpacker/manifest.rb +58 -21
- data/lib/webpacker/railtie.rb +3 -2
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +13 -2
- data/package.json +31 -27
- data/package/__tests__/config.js +25 -3
- data/package/config.js +15 -7
- data/package/environments/__tests__/base.js +5 -3
- data/package/environments/base.js +41 -4
- data/package/environments/production.js +17 -6
- data/package/rules/babel.js +10 -4
- data/package/rules/file.js +2 -2
- data/package/rules/index.js +7 -2
- data/package/rules/node_modules.js +22 -0
- data/package/utils/__tests__/get_style_rule.js +20 -0
- data/package/utils/get_style_rule.js +6 -5
- data/package/utils/helpers.js +12 -1
- data/test/compiler_test.rb +2 -0
- data/test/dev_server_runner_test.rb +51 -0
- data/test/helper_test.rb +28 -5
- data/test/manifest_test.rb +10 -0
- data/test/rake_tasks_test.rb +34 -0
- data/test/test_app/config/application.rb +1 -0
- data/test/test_app/config/webpack/development.js +0 -0
- data/test/test_app/config/webpacker.yml +25 -0
- data/test/test_app/package.json +13 -0
- data/test/test_app/public/packs/manifest.json +10 -1
- data/test/test_app/yarn.lock +11 -0
- data/test/webpack_runner_test.rb +51 -0
- data/yarn.lock +2669 -1809
- metadata +20 -8
- data/lib/install/config/.babelrc +0 -41
- data/lib/install/config/.postcssrc.yml +0 -3
- data/lib/install/examples/react/.babelrc +0 -47
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e52c39041f23ecbc17950281b9c67171f6fad95a9032a65a354c6a952837022b
|
4
|
+
data.tar.gz: a796ef041974243ac16301c12635cfba31f0e009104a4a03616e4cff47ef721b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b9009fcf8926de9d75cc6f98f89a735aca447c314b5df54c2715cfb960e9cceedad2fbd4a98db27a73fa73085062a67ae7b406e76c0610d207a7bd0f3406f17e
|
7
|
+
data.tar.gz: 2f17f73477c88cc5eebd6a01fb483269532bb2d5885d755d4d22f76b357c036a7145e30878eaccbeda140ef17a56f9b8d603088547c85c0fe165ce255ee10d99
|
data/.node-version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
6.14.
|
1
|
+
6.14.4
|
data/.travis.yml
CHANGED
@@ -3,9 +3,9 @@ language: ruby
|
|
3
3
|
before_install:
|
4
4
|
- gem update --system
|
5
5
|
rvm:
|
6
|
-
- 2.3.
|
7
|
-
- 2.4.
|
8
|
-
- 2.5.
|
6
|
+
- 2.3.8
|
7
|
+
- 2.4.5
|
8
|
+
- 2.5.3
|
9
9
|
- ruby-head
|
10
10
|
gemfile:
|
11
11
|
- gemfiles/Gemfile-rails.4.2.x
|
@@ -34,5 +34,7 @@ matrix:
|
|
34
34
|
allow_failures:
|
35
35
|
- gemfile: gemfiles/Gemfile-rails-edge
|
36
36
|
exclude:
|
37
|
-
- rvm: 2.3.
|
37
|
+
- rvm: 2.3.8
|
38
38
|
gemfile: gemfiles/Gemfile-rails-edge
|
39
|
+
- rvm: ruby-head
|
40
|
+
gemfile: gemfiles/Gemfile-rails.4.2.x
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,43 @@
|
|
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
|
+
## [4.0.0.rc.1] - 2018-12-14
|
4
|
+
|
5
|
+
## Breaking changes
|
6
|
+
|
7
|
+
- Order of rules changed so you might have to change append to prepend,
|
8
|
+
depending on how you want to process packs [#1823](https://github.com/rails/webpacker/pull/1823)
|
9
|
+
```js
|
10
|
+
environment.loaders.prepend()
|
11
|
+
```
|
12
|
+
- Separate CSS extraction from build environment [#1625](https://github.com/rails/webpacker/pull/1625)
|
13
|
+
```yml
|
14
|
+
# Extract and emit a css file
|
15
|
+
extract_css: true
|
16
|
+
```
|
17
|
+
- Separate rule to compile node modules
|
18
|
+
(fixes cases where ES6 libraries were included in the app code) [#1823](https://github.com/rails/webpacker/pull/1823)
|
19
|
+
- File loader extensions API [#1823](https://github.com/rails/webpacker/pull/1823)
|
20
|
+
```yml
|
21
|
+
# webpacker.yml
|
22
|
+
static_assets_extensions:
|
23
|
+
- .pdf
|
24
|
+
# etc..
|
25
|
+
```
|
26
|
+
|
27
|
+
### Added
|
28
|
+
|
29
|
+
- Move `.babelrc` and `.postcssrc` to `.js` variant [#1822](https://github.com/rails/webpacker/pull/1822)
|
30
|
+
- Use postcss safe parser when optimising css assets [#1822](https://github.com/rails/webpacker/pull/1822)
|
31
|
+
- Add split chunks api (undocumented)
|
32
|
+
```js
|
33
|
+
const { environment } = require('@rails/webpacker')
|
34
|
+
// Enable with default config
|
35
|
+
environment.splitChunks()
|
36
|
+
// Configure via a callback
|
37
|
+
environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
|
38
|
+
```
|
39
|
+
- Allow changing static file extensions using webpacker.yml (undocumented)
|
40
|
+
|
3
41
|
## [4.0.0-pre.3] - 2018-10-01
|
4
42
|
|
5
43
|
### Added
|
data/CONTRIBUTING.md
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
## Setting Up a Development Environment
|
2
|
+
|
3
|
+
1. Install [Yarn](https://yarnpkg.com/)
|
4
|
+
|
5
|
+
2. Run the following commands to set up the development environment.
|
6
|
+
```
|
7
|
+
bundle install
|
8
|
+
yarn
|
9
|
+
```
|
10
|
+
|
11
|
+
## Making sure your changes pass all tests
|
12
|
+
There are a number of automated checks which run on Travis CI when a pull request is created.
|
13
|
+
You can run those checks on your own locally to make sure that your changes would not break the CI build.
|
14
|
+
|
15
|
+
### 1. Check the code for JavaScript style violations
|
16
|
+
```
|
17
|
+
yarn lint
|
18
|
+
```
|
19
|
+
|
20
|
+
### 2. Check the code for Ruby style violations
|
21
|
+
```
|
22
|
+
bundle exec rubocop
|
23
|
+
```
|
24
|
+
|
25
|
+
### 3. Run the JavaScript test suite
|
26
|
+
```
|
27
|
+
yarn test
|
28
|
+
```
|
29
|
+
|
30
|
+
### 4. Run the Ruby test suite
|
31
|
+
```
|
32
|
+
bundle exec rake test
|
33
|
+
```
|
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,7 +1,20 @@
|
|
1
|
+
GIT
|
2
|
+
remote: https://github.com/rubocop-hq/rubocop.git
|
3
|
+
revision: 3d4ba9c2d0782b352bf807cd9fed66ce58e83641
|
4
|
+
specs:
|
5
|
+
rubocop (0.61.1)
|
6
|
+
jaro_winkler (~> 1.5.1)
|
7
|
+
parallel (~> 1.10)
|
8
|
+
parser (>= 2.5, != 2.5.1.1)
|
9
|
+
powerpack (~> 0.1)
|
10
|
+
rainbow (>= 2.2.2, < 4.0)
|
11
|
+
ruby-progressbar (~> 1.7)
|
12
|
+
unicode-display_width (~> 1.4.0)
|
13
|
+
|
1
14
|
PATH
|
2
15
|
remote: .
|
3
16
|
specs:
|
4
|
-
webpacker (4.0.0.
|
17
|
+
webpacker (4.0.0.rc.1)
|
5
18
|
activesupport (>= 4.2)
|
6
19
|
rack-proxy (>= 0.6.1)
|
7
20
|
railties (>= 4.2)
|
@@ -9,43 +22,43 @@ PATH
|
|
9
22
|
GEM
|
10
23
|
remote: https://rubygems.org/
|
11
24
|
specs:
|
12
|
-
actioncable (5.2.
|
13
|
-
actionpack (= 5.2.
|
25
|
+
actioncable (5.2.2)
|
26
|
+
actionpack (= 5.2.2)
|
14
27
|
nio4r (~> 2.0)
|
15
28
|
websocket-driver (>= 0.6.1)
|
16
|
-
actionmailer (5.2.
|
17
|
-
actionpack (= 5.2.
|
18
|
-
actionview (= 5.2.
|
19
|
-
activejob (= 5.2.
|
29
|
+
actionmailer (5.2.2)
|
30
|
+
actionpack (= 5.2.2)
|
31
|
+
actionview (= 5.2.2)
|
32
|
+
activejob (= 5.2.2)
|
20
33
|
mail (~> 2.5, >= 2.5.4)
|
21
34
|
rails-dom-testing (~> 2.0)
|
22
|
-
actionpack (5.2.
|
23
|
-
actionview (= 5.2.
|
24
|
-
activesupport (= 5.2.
|
35
|
+
actionpack (5.2.2)
|
36
|
+
actionview (= 5.2.2)
|
37
|
+
activesupport (= 5.2.2)
|
25
38
|
rack (~> 2.0)
|
26
39
|
rack-test (>= 0.6.3)
|
27
40
|
rails-dom-testing (~> 2.0)
|
28
41
|
rails-html-sanitizer (~> 1.0, >= 1.0.2)
|
29
|
-
actionview (5.2.
|
30
|
-
activesupport (= 5.2.
|
42
|
+
actionview (5.2.2)
|
43
|
+
activesupport (= 5.2.2)
|
31
44
|
builder (~> 3.1)
|
32
45
|
erubi (~> 1.4)
|
33
46
|
rails-dom-testing (~> 2.0)
|
34
47
|
rails-html-sanitizer (~> 1.0, >= 1.0.3)
|
35
|
-
activejob (5.2.
|
36
|
-
activesupport (= 5.2.
|
48
|
+
activejob (5.2.2)
|
49
|
+
activesupport (= 5.2.2)
|
37
50
|
globalid (>= 0.3.6)
|
38
|
-
activemodel (5.2.
|
39
|
-
activesupport (= 5.2.
|
40
|
-
activerecord (5.2.
|
41
|
-
activemodel (= 5.2.
|
42
|
-
activesupport (= 5.2.
|
51
|
+
activemodel (5.2.2)
|
52
|
+
activesupport (= 5.2.2)
|
53
|
+
activerecord (5.2.2)
|
54
|
+
activemodel (= 5.2.2)
|
55
|
+
activesupport (= 5.2.2)
|
43
56
|
arel (>= 9.0)
|
44
|
-
activestorage (5.2.
|
45
|
-
actionpack (= 5.2.
|
46
|
-
activerecord (= 5.2.
|
57
|
+
activestorage (5.2.2)
|
58
|
+
actionpack (= 5.2.2)
|
59
|
+
activerecord (= 5.2.2)
|
47
60
|
marcel (~> 0.3.1)
|
48
|
-
activesupport (5.2.
|
61
|
+
activesupport (5.2.2)
|
49
62
|
concurrent-ruby (~> 1.0, >= 1.0.2)
|
50
63
|
i18n (>= 0.7, < 2)
|
51
64
|
minitest (~> 5.1)
|
@@ -54,72 +67,64 @@ GEM
|
|
54
67
|
ast (2.4.0)
|
55
68
|
builder (3.2.3)
|
56
69
|
byebug (10.0.2)
|
57
|
-
concurrent-ruby (1.
|
70
|
+
concurrent-ruby (1.1.3)
|
58
71
|
crass (1.0.4)
|
59
72
|
erubi (1.7.1)
|
60
73
|
globalid (0.4.1)
|
61
74
|
activesupport (>= 4.2.0)
|
62
|
-
i18n (1.
|
75
|
+
i18n (1.2.0)
|
63
76
|
concurrent-ruby (~> 1.0)
|
64
77
|
jaro_winkler (1.5.1)
|
65
|
-
loofah (2.2.
|
78
|
+
loofah (2.2.3)
|
66
79
|
crass (~> 1.0.2)
|
67
80
|
nokogiri (>= 1.5.9)
|
68
|
-
mail (2.7.
|
81
|
+
mail (2.7.1)
|
69
82
|
mini_mime (>= 0.1.1)
|
70
|
-
marcel (0.3.
|
83
|
+
marcel (0.3.3)
|
71
84
|
mimemagic (~> 0.3.2)
|
72
|
-
method_source (0.9.
|
85
|
+
method_source (0.9.2)
|
73
86
|
mimemagic (0.3.2)
|
74
87
|
mini_mime (1.0.1)
|
75
88
|
mini_portile2 (2.3.0)
|
76
89
|
minitest (5.11.3)
|
77
90
|
nio4r (2.3.1)
|
78
|
-
nokogiri (1.8.
|
91
|
+
nokogiri (1.8.5)
|
79
92
|
mini_portile2 (~> 2.3.0)
|
80
93
|
parallel (1.12.1)
|
81
|
-
parser (2.5.
|
94
|
+
parser (2.5.3.0)
|
82
95
|
ast (~> 2.4.0)
|
83
96
|
powerpack (0.1.2)
|
84
|
-
rack (2.0.
|
85
|
-
rack-proxy (0.6.
|
97
|
+
rack (2.0.6)
|
98
|
+
rack-proxy (0.6.5)
|
86
99
|
rack
|
87
100
|
rack-test (1.1.0)
|
88
101
|
rack (>= 1.0, < 3)
|
89
|
-
rails (5.2.
|
90
|
-
actioncable (= 5.2.
|
91
|
-
actionmailer (= 5.2.
|
92
|
-
actionpack (= 5.2.
|
93
|
-
actionview (= 5.2.
|
94
|
-
activejob (= 5.2.
|
95
|
-
activemodel (= 5.2.
|
96
|
-
activerecord (= 5.2.
|
97
|
-
activestorage (= 5.2.
|
98
|
-
activesupport (= 5.2.
|
102
|
+
rails (5.2.2)
|
103
|
+
actioncable (= 5.2.2)
|
104
|
+
actionmailer (= 5.2.2)
|
105
|
+
actionpack (= 5.2.2)
|
106
|
+
actionview (= 5.2.2)
|
107
|
+
activejob (= 5.2.2)
|
108
|
+
activemodel (= 5.2.2)
|
109
|
+
activerecord (= 5.2.2)
|
110
|
+
activestorage (= 5.2.2)
|
111
|
+
activesupport (= 5.2.2)
|
99
112
|
bundler (>= 1.3.0)
|
100
|
-
railties (= 5.2.
|
113
|
+
railties (= 5.2.2)
|
101
114
|
sprockets-rails (>= 2.0.0)
|
102
115
|
rails-dom-testing (2.0.3)
|
103
116
|
activesupport (>= 4.2.0)
|
104
117
|
nokogiri (>= 1.6)
|
105
118
|
rails-html-sanitizer (1.0.4)
|
106
119
|
loofah (~> 2.2, >= 2.2.2)
|
107
|
-
railties (5.2.
|
108
|
-
actionpack (= 5.2.
|
109
|
-
activesupport (= 5.2.
|
120
|
+
railties (5.2.2)
|
121
|
+
actionpack (= 5.2.2)
|
122
|
+
activesupport (= 5.2.2)
|
110
123
|
method_source
|
111
124
|
rake (>= 0.8.7)
|
112
125
|
thor (>= 0.19.0, < 2.0)
|
113
126
|
rainbow (3.0.0)
|
114
|
-
rake (12.3.
|
115
|
-
rubocop (0.58.2)
|
116
|
-
jaro_winkler (~> 1.5.1)
|
117
|
-
parallel (~> 1.10)
|
118
|
-
parser (>= 2.5, != 2.5.1.1)
|
119
|
-
powerpack (~> 0.1)
|
120
|
-
rainbow (>= 2.2.2, < 4.0)
|
121
|
-
ruby-progressbar (~> 1.7)
|
122
|
-
unicode-display_width (~> 1.0, >= 1.0.1)
|
127
|
+
rake (12.3.2)
|
123
128
|
ruby-progressbar (1.10.0)
|
124
129
|
sprockets (3.7.2)
|
125
130
|
concurrent-ruby (~> 1.0)
|
@@ -128,7 +133,7 @@ GEM
|
|
128
133
|
actionpack (>= 4.0)
|
129
134
|
activesupport (>= 4.0)
|
130
135
|
sprockets (>= 3.0.0)
|
131
|
-
thor (0.20.
|
136
|
+
thor (0.20.3)
|
132
137
|
thread_safe (0.3.6)
|
133
138
|
tzinfo (1.2.5)
|
134
139
|
thread_safe (~> 0.1)
|
@@ -147,8 +152,8 @@ DEPENDENCIES
|
|
147
152
|
rack-proxy
|
148
153
|
rails
|
149
154
|
rake (>= 11.1)
|
150
|
-
rubocop
|
155
|
+
rubocop!
|
151
156
|
webpacker!
|
152
157
|
|
153
158
|
BUNDLED WITH
|
154
|
-
1.
|
159
|
+
1.17.1
|
data/README.md
CHANGED
@@ -41,6 +41,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
41
41
|
- [Watched](#watched)
|
42
42
|
- [Deployment](#deployment)
|
43
43
|
- [Docs](#docs)
|
44
|
+
- [Contributing](#contributing)
|
44
45
|
- [License](#license)
|
45
46
|
|
46
47
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
@@ -50,7 +51,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
50
51
|
|
51
52
|
* Ruby 2.2+
|
52
53
|
* Rails 4.2+
|
53
|
-
* Node.js 6.14.
|
54
|
+
* Node.js 6.14.4+
|
54
55
|
* Yarn 1.x+
|
55
56
|
|
56
57
|
|
@@ -91,7 +92,7 @@ yarn add https://github.com/rails/webpacker.git
|
|
91
92
|
|
92
93
|
# OR to try out 4.x pre-release
|
93
94
|
gem 'webpacker', '>= 4.0.x'
|
94
|
-
yarn add @rails/webpacker@
|
95
|
+
yarn add @rails/webpacker@next
|
95
96
|
```
|
96
97
|
|
97
98
|
Finally, run the following to install Webpacker:
|
@@ -230,7 +231,7 @@ staging:
|
|
230
231
|
public_output_path: packs-staging
|
231
232
|
```
|
232
233
|
|
233
|
-
or, Webpacker will use production environment as a fallback environment for loading configurations. Please note, `NODE_ENV` can either be set to `production` or `
|
234
|
+
or, Webpacker will use production environment as a fallback environment for loading configurations. Please note, `NODE_ENV` can either be set to `production`, `development` or `test`.
|
234
235
|
This means you don't need to create additional environment files inside `config/webpacker/*` and instead use webpacker.yml to load different configurations using `RAILS_ENV`.
|
235
236
|
|
236
237
|
For example, the below command will compile assets in production mode but will use staging configurations from `config/webpacker.yml` if available or use fallback production environment configuration:
|
@@ -271,7 +272,7 @@ yarn upgrade @rails/webpacker --latest
|
|
271
272
|
yarn add webpack-dev-server@^2.11.1
|
272
273
|
|
273
274
|
# Or to install a latest release (including pre-releases)
|
274
|
-
yarn add @rails/webpacker@
|
275
|
+
yarn add @rails/webpacker@next
|
275
276
|
```
|
276
277
|
|
277
278
|
### Yarn Integrity
|
@@ -345,11 +346,13 @@ development environment. This can be done in the `config/initializers/content_se
|
|
345
346
|
with the following code:
|
346
347
|
|
347
348
|
```ruby
|
349
|
+
Rails.application.config.content_security_policy do |policy|
|
348
350
|
if Rails.env.development?
|
349
351
|
policy.script_src :self, :https, :unsafe_eval
|
350
352
|
else
|
351
353
|
policy.script_src :self, :https
|
352
354
|
end
|
355
|
+
end
|
353
356
|
```
|
354
357
|
|
355
358
|
|
@@ -373,11 +376,13 @@ This can be done in the `config/initializers/content_security_policy.rb` with th
|
|
373
376
|
configuration:
|
374
377
|
|
375
378
|
```ruby
|
379
|
+
Rails.application.config.content_security_policy do |policy|
|
376
380
|
if Rails.env.development?
|
377
381
|
policy.script_src :self, :https, :unsafe_eval
|
378
382
|
else
|
379
383
|
policy.script_src :self, :https
|
380
384
|
end
|
385
|
+
end
|
381
386
|
```
|
382
387
|
You can read more about this in the [Vue docs](https://vuejs.org/v2/guide/installation.html#CSP-environments).
|
383
388
|
|
@@ -510,10 +515,17 @@ Webpacker::Compiler.watched_paths << 'bower_components'
|
|
510
515
|
|
511
516
|
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).
|
512
517
|
|
518
|
+
|
513
519
|
## Docs
|
514
520
|
|
515
521
|
You can find more detailed guides under [docs](./docs).
|
516
522
|
|
517
523
|
|
524
|
+
## Contributing
|
525
|
+
[![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)
|
526
|
+
|
527
|
+
We encourage you to contribute to Webpacker! See [CONTRIBUTING](CONTRIBUTING.md) for guidelines about how to proceed.
|
528
|
+
|
529
|
+
|
518
530
|
## License
|
519
531
|
Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).
|
data/docs/assets.md
CHANGED
@@ -56,12 +56,12 @@ You can also use [babel-plugin-module-resolver](https://github.com/tleunen/babel
|
|
56
56
|
yarn add babel-plugin-module-resolver
|
57
57
|
```
|
58
58
|
|
59
|
-
Specify the plugin in your
|
59
|
+
Specify the plugin in your `babel.config.js` with the custom root or alias. Here's an example:
|
60
60
|
|
61
|
-
```
|
61
|
+
```js
|
62
62
|
{
|
63
|
-
|
64
|
-
["module-resolver", {
|
63
|
+
plugins: [
|
64
|
+
[require("module-resolver").default, {
|
65
65
|
"root": ["./app"],
|
66
66
|
"alias": {
|
67
67
|
"assets": "./assets"
|
@@ -103,4 +103,7 @@ app/javascript:
|
|
103
103
|
|
104
104
|
<img src="<%= asset_pack_path 'images/calendar.png' %>" />
|
105
105
|
<% # => <img src="/packs/images/calendar.png" /> %>
|
106
|
+
|
107
|
+
<%= image_pack_tag 'images/calendar.png' %>
|
108
|
+
<% # => <img src="/packs/images/calendar.png" /> %>
|
106
109
|
```
|
data/docs/css.md
CHANGED
@@ -16,7 +16,7 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr
|
|
16
16
|
|
17
17
|
```js
|
18
18
|
// React component example
|
19
|
-
// app/
|
19
|
+
// app/javascript/packs/hello_react.jsx
|
20
20
|
|
21
21
|
import React from 'react'
|
22
22
|
import helloIcon from '../hello_react/images/icon.png'
|
@@ -44,7 +44,7 @@ Stylesheets end with `.module.*` is treated as [CSS Modules](https://github.com/
|
|
44
44
|
|
45
45
|
```js
|
46
46
|
// React component example
|
47
|
-
// app/
|
47
|
+
// app/javascript/packs/hello_react.jsx
|
48
48
|
|
49
49
|
import React from 'react'
|
50
50
|
import helloIcon from '../hello_react/images/icon.png'
|
@@ -64,7 +64,7 @@ const Hello = props => (
|
|
64
64
|
## Link styles from your Rails views
|
65
65
|
|
66
66
|
Under the hood webpack uses
|
67
|
-
[
|
67
|
+
[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) plugin to extract all the referenced styles within your app and compile it into
|
68
68
|
a separate `[pack_name].css` bundle so that in your view you can use the
|
69
69
|
`stylesheet_pack_tag` helper.
|
70
70
|
|
@@ -72,6 +72,7 @@ a separate `[pack_name].css` bundle so that in your view you can use the
|
|
72
72
|
<%= stylesheet_pack_tag 'hello_react' %>
|
73
73
|
```
|
74
74
|
|
75
|
+
Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
|
75
76
|
|
76
77
|
## Add bootstrap
|
77
78
|
|
@@ -102,13 +103,22 @@ Or in your app/javascript/app.sass file:
|
|
102
103
|
|
103
104
|
Webpacker out-of-the-box provides CSS post-processing using
|
104
105
|
[postcss-loader](https://github.com/postcss/postcss-loader)
|
105
|
-
and the installer sets up a standard
|
106
|
+
and the installer sets up a standard `postcss.config.js`
|
106
107
|
file in your app root with standard plugins.
|
107
108
|
|
108
|
-
```
|
109
|
-
|
110
|
-
|
111
|
-
|
109
|
+
```js
|
110
|
+
module.exports = {
|
111
|
+
plugins: [
|
112
|
+
require('postcss-import'),
|
113
|
+
require('postcss-flexbugs-fixes'),
|
114
|
+
require('postcss-preset-env')({
|
115
|
+
autoprefixer: {
|
116
|
+
flexbox: 'no-2009'
|
117
|
+
},
|
118
|
+
stage: 3
|
119
|
+
})
|
120
|
+
]
|
121
|
+
}
|
112
122
|
```
|
113
123
|
|
114
124
|
## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
|
@@ -144,3 +154,36 @@ environment.loaders.get('sass').use.splice(-1, 0, {
|
|
144
154
|
}
|
145
155
|
});
|
146
156
|
```
|
157
|
+
|
158
|
+
## Working with TypeScript
|
159
|
+
|
160
|
+
In order to get CSS to work with typescript you have two options.
|
161
|
+
You can either use `require` to bypass typescript special `import`.
|
162
|
+
|
163
|
+
```ts
|
164
|
+
const styles = require('../hello_react/styles/hello-react');
|
165
|
+
```
|
166
|
+
You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
|
167
|
+
|
168
|
+
```js
|
169
|
+
// app/javascript/packs/hello_react.jsx
|
170
|
+
import * as styles from '../hello_react.styles/hello-react.module.scss';
|
171
|
+
```
|
172
|
+
|
173
|
+
```bash
|
174
|
+
yarn add --dev typings-for-css-modules-loader
|
175
|
+
```
|
176
|
+
|
177
|
+
```js
|
178
|
+
// webpack/environment.js
|
179
|
+
const { environment } = require('@rails/webpacker')
|
180
|
+
|
181
|
+
// replace css-loader with typings-for-css-modules-loader
|
182
|
+
environment.loaders.get('moduleSass').use = environment.loaders.get('moduleSass').use.map((u) => {
|
183
|
+
if(u.loader == 'css-loader') {
|
184
|
+
return { ...u, loader: 'typings-for-css-modules-loader' };
|
185
|
+
} else {
|
186
|
+
return u;
|
187
|
+
}
|
188
|
+
});
|
189
|
+
```
|