webpacker 6.0.0.beta.4 → 6.0.0.beta.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/6_0_upgrade.md +16 -2
- data/Gemfile.lock +1 -1
- data/README.md +56 -21
- data/docs/troubleshooting.md +160 -0
- data/lib/webpacker/helper.rb +11 -41
- data/lib/webpacker/version.rb +1 -1
- data/package.json +1 -1
- data/package/utils/helpers.js +4 -2
- data/test/helper_test.rb +33 -39
- data/test/test_app/public/packs/manifest.json +7 -0
- metadata +5 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: eee103ac302f31dfd3aab8246c08b6f38409be2bb226c9980b2f3ab55d8222bf
|
4
|
+
data.tar.gz: 6bd2f9be419e82dbbcc2a3142bd1f2f9c0ff7ea80373143f0eb60dd1fc118a7c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 98cb1515161e7787a62a2c53cc617a5ae7b754a8d47bbecd32bf55f5707c5238437ef5df64fbe9798183825e1b209ed918095ed0bcf59566ab9a55fbcfdfdd27
|
7
|
+
data.tar.gz: c1cde3f92061eb6f1fe1c23506c0f2299b7a4c0c7d1b046a168630fd15e7c217ab4dbdfdabef8acb39e743058b41b1912eb3ede1320b07aa945ea4e7ea59a319
|
data/6_0_upgrade.md
CHANGED
@@ -30,13 +30,16 @@ straightforward.
|
|
30
30
|
bundle exec rails webpacker:install
|
31
31
|
```
|
32
32
|
|
33
|
-
- Change `
|
34
|
-
`
|
33
|
+
- Change `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and
|
34
|
+
`stylesheet_pack_tag`.
|
35
35
|
|
36
36
|
7. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.0.
|
37
37
|
|
38
38
|
8. Copy over any custom webpack config from `config/webpack_old`
|
39
39
|
|
40
|
+
- Common code previously called 'environment' changed to 'base'
|
41
|
+
- import `environment` changed name to `webpackConfig`.
|
42
|
+
|
40
43
|
```js
|
41
44
|
// config/webpack/base.js
|
42
45
|
const { webpackConfig, merge } = require('@rails/webpacker')
|
@@ -46,3 +49,14 @@ straightforward.
|
|
46
49
|
```
|
47
50
|
|
48
51
|
9. Copy over custom browserlist config from `.browserlistrc` if it exists into the `"browserlist"` key in `package.json` and remove `.browserslistrc`.
|
52
|
+
|
53
|
+
10. `extensions` was removed from the webpacker.yml file. Move custom extensions to
|
54
|
+
your configuration by by merging an object like this. For more details, see docs for
|
55
|
+
[Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
|
56
|
+
```js
|
57
|
+
{
|
58
|
+
resolve: {
|
59
|
+
extensions: ['.ts', '.tsx']
|
60
|
+
}
|
61
|
+
}
|
62
|
+
```
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -59,7 +59,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
|
|
59
59
|
- Rails view helpers
|
60
60
|
- Extensible and configurable
|
61
61
|
|
62
|
-
|
62
|
+
### Optional support
|
63
63
|
|
64
64
|
_requires extra packages to be installed_
|
65
65
|
|
@@ -108,7 +108,8 @@ yarn upgrade
|
|
108
108
|
When `package.json` and/or `yarn.lock` changes, such as when pulling down changes to your local environment in a team settings, be sure to keep your NPM packages up-to-date:
|
109
109
|
|
110
110
|
```bash
|
111
|
-
yarn install
|
111
|
+
# default for `yarn` is to install
|
112
|
+
yarn
|
112
113
|
```
|
113
114
|
|
114
115
|
### Usage
|
@@ -129,10 +130,10 @@ app/packs:
|
|
129
130
|
└── logo.svg
|
130
131
|
```
|
131
132
|
|
132
|
-
You can then link the JavaScript pack in Rails views using the `
|
133
|
+
You can then link the JavaScript pack in Rails views using the `javascript_pack_tag` helper. If you have styles imported in your pack file, you can link them by using `stylesheet_packs_with_chunks_tag`:
|
133
134
|
|
134
135
|
```erb
|
135
|
-
<%=
|
136
|
+
<%= javascript_pack_tag 'application' %>
|
136
137
|
<%= stylesheet_packs_with_chunks_tag 'application' %>
|
137
138
|
```
|
138
139
|
|
@@ -165,8 +166,14 @@ If you want to use images in your stylesheets:
|
|
165
166
|
}
|
166
167
|
```
|
167
168
|
|
169
|
+
Note, if you are using server-side rendering of JavaScript with dynamic code-spliting,
|
170
|
+
as is often done with extensions to Webpacker, like [React on Rails](https://github.com/shakacode/react_on_rails)
|
171
|
+
your JavaScript should create the link prefetch HTML tags that you will use, so you won't
|
172
|
+
need to use to `asset_pack_path` in those circumstances.
|
173
|
+
|
168
174
|
**Note:** In order for your styles or static assets files to be available in your view,
|
169
|
-
you would need to link them in your
|
175
|
+
you would need to link them in your "pack" or entry file. Otherwise, Webpack won't know
|
176
|
+
to package up those files.
|
170
177
|
|
171
178
|
### Development
|
172
179
|
|
@@ -178,11 +185,20 @@ are loaded based on your environment.
|
|
178
185
|
In development, Webpacker compiles on demand rather than upfront by default. This
|
179
186
|
happens when you refer to any of the pack assets using the Webpacker helper methods.
|
180
187
|
This means that you don't have to run any separate processes. Compilation errors are logged
|
181
|
-
to the standard Rails log.
|
188
|
+
to the standard Rails log. However, this auto-compilation happens when a web request
|
189
|
+
is made that requires an updated webpack build, not when files change. Thus, that can
|
190
|
+
be painfully slow for front-end development in this default way. Instead, you should either
|
191
|
+
run the `bin/webpack --watch` or run `./bin/webpack-dev-server`
|
192
|
+
|
193
|
+
If you want to use live code reloading, or you have enough JavaScript that on-demand compilation is too slow, you'll need to run `./bin/webpack-dev-server` or `ruby ./bin/webpack-dev-server`.
|
194
|
+
Windows users will need to run these commands in a terminal separate from `bundle exec rails s`.
|
195
|
+
This process will watch for changes in the `app/packs/entrypoints/*.js` files and automatically
|
196
|
+
reload the browser to match. This feature is also known as
|
197
|
+
[Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/).
|
182
198
|
|
183
|
-
|
184
|
-
|
185
|
-
|
199
|
+
HMR is only the first step to running "Fast Refresh" with React. For more information
|
200
|
+
on how to configure rails/webpacker for Fast Refresh with React, see article
|
201
|
+
[HMR and React Hot Reloading](https://github.com/shakacode/react_on_rails/blob/master/docs/rails-webpacker-react-integration-options.md#hmr-and-react-hot-reloading).
|
186
202
|
|
187
203
|
```bash
|
188
204
|
# webpack dev server
|
@@ -195,9 +211,10 @@ in the `app/packs/entrypoints/*.js` files and automatically reload the browser t
|
|
195
211
|
./bin/webpack
|
196
212
|
```
|
197
213
|
|
198
|
-
Once you start this development server, Webpacker will automatically start proxying all
|
199
|
-
webpack asset requests to this server. When you stop
|
200
|
-
on-demand compilation
|
214
|
+
Once you start this webpack development server, Webpacker will automatically start proxying all
|
215
|
+
webpack asset requests to this server. When you stop this server, Rails will detect
|
216
|
+
that it's not running and Rails will revert back to on-demand compilation _if_ you have
|
217
|
+
the `compile` option set to true in your `config/webpacker.yml`
|
201
218
|
|
202
219
|
You can use environment variables as options supported by
|
203
220
|
[webpack-dev-server](https://webpack.js.org/configuration/dev-server/) in the
|
@@ -277,13 +294,16 @@ const { webpackConfig } = require('@rails/webpacker')
|
|
277
294
|
|
278
295
|
console.log(webpackConfig.output_path)
|
279
296
|
console.log(webpackConfig.source_path)
|
297
|
+
|
298
|
+
// Or to print out your whole webpack configuration
|
299
|
+
console.log(JSON.stringify(webpackConfig, undefined, 2))
|
280
300
|
```
|
281
301
|
|
282
302
|
### Integrations
|
283
303
|
|
284
304
|
Webpacker out of the box supports JS and static assets (fonts, images etc.)
|
285
305
|
compilation. To enable support for CoffeeScript or TypeScript install
|
286
|
-
relevant packages
|
306
|
+
relevant packages:
|
287
307
|
|
288
308
|
#### CoffeeScript
|
289
309
|
|
@@ -323,13 +343,13 @@ Add tsconfig.json
|
|
323
343
|
|
324
344
|
#### CSS
|
325
345
|
|
326
|
-
To enable CSS support in your application, add following packages
|
346
|
+
To enable CSS support in your application, add following packages:
|
327
347
|
|
328
348
|
```bash
|
329
349
|
yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin
|
330
350
|
```
|
331
351
|
|
332
|
-
optionally, add css extension to webpack config for easy resolution
|
352
|
+
optionally, add the css extension to webpack config for easy resolution.
|
333
353
|
|
334
354
|
```js
|
335
355
|
// config/webpack/base.js
|
@@ -399,6 +419,10 @@ if you are using typescript, update your `tsconfig.json`
|
|
399
419
|
}
|
400
420
|
```
|
401
421
|
|
422
|
+
For more information on React props hydration and Server-Side Rendering (SSR), see the article
|
423
|
+
[Rails/Webpacker React Integration Options](https://github.com/shakacode/react_on_rails/blob/master/docs/rails-webpacker-react-integration-options.md)
|
424
|
+
in the [ShakaCode/react_on_rails](https://github.com/shakacode/react_on_rails) repo.
|
425
|
+
|
402
426
|
#### Other frameworks
|
403
427
|
|
404
428
|
Please follow webpack integration guide for relevant framework or library,
|
@@ -473,11 +497,11 @@ Please note, binstubs compiles in development mode however rake tasks
|
|
473
497
|
compiles in production mode.
|
474
498
|
|
475
499
|
```bash
|
476
|
-
# Compiles in development mode unless NODE_ENV is specified
|
500
|
+
# Compiles in development mode unless NODE_ENV is specified, per the binstub source
|
477
501
|
./bin/webpack
|
478
502
|
./bin/webpack-dev-server
|
479
503
|
|
480
|
-
#
|
504
|
+
# Compiles in production mode by default unless NODE_ENV is specified, per `lib/tasks/webpacker/compile.rake`
|
481
505
|
bundle exec rails assets:precompile
|
482
506
|
bundle exec rails webpacker:compile
|
483
507
|
```
|
@@ -487,8 +511,12 @@ bundle exec rails webpacker:compile
|
|
487
511
|
You can run following commands to upgrade Webpacker to the latest stable version. This process involves upgrading the gem and related JavaScript packages:
|
488
512
|
|
489
513
|
```bash
|
514
|
+
# check your Gemfile for version restrictions
|
490
515
|
bundle update webpacker
|
516
|
+
|
517
|
+
# overwrite your changes to the default install files and revert any unwanted changes from the install
|
491
518
|
rails webpacker:install
|
519
|
+
|
492
520
|
yarn upgrade @rails/webpacker --latest
|
493
521
|
yarn upgrade webpack-dev-server --latest
|
494
522
|
|
@@ -496,6 +524,8 @@ yarn upgrade webpack-dev-server --latest
|
|
496
524
|
yarn add @rails/webpacker@next
|
497
525
|
```
|
498
526
|
|
527
|
+
Also, consult the [CHANGELOG](./CHANGELOG.md) for additional upgrade links.
|
528
|
+
|
499
529
|
## Paths
|
500
530
|
|
501
531
|
By default, Webpacker ships with simple conventions for where the JavaScript
|
@@ -514,8 +544,7 @@ to `frontend` and output to `assets/packs`. This is how you would do it:
|
|
514
544
|
|
515
545
|
```yml
|
516
546
|
# config/webpacker.yml
|
517
|
-
source_path: frontend
|
518
|
-
source_entry_path: packs
|
547
|
+
source_path: frontend # packs are in frontend/packs
|
519
548
|
public_output_path: assets/packs # outputs to => public/assets/packs
|
520
549
|
```
|
521
550
|
|
@@ -529,7 +558,9 @@ development:
|
|
529
558
|
port: 3035
|
530
559
|
```
|
531
560
|
|
532
|
-
If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output,
|
561
|
+
If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output,
|
562
|
+
as you will want to configure your styles to be inlined in your JavaScript for hot reloading.
|
563
|
+
During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
|
533
564
|
|
534
565
|
### Additional paths
|
535
566
|
|
@@ -540,7 +571,7 @@ option available in `config/webpacker.yml`. This lets you
|
|
540
571
|
add additional paths that webpack should lookup when resolving modules:
|
541
572
|
|
542
573
|
```yml
|
543
|
-
additional_paths: ['app/assets
|
574
|
+
additional_paths: ['app/assets', 'vendor/assets']
|
544
575
|
```
|
545
576
|
|
546
577
|
You can then import these items inside your modules like so:
|
@@ -561,6 +592,10 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
|
|
561
592
|
|
562
593
|
When compiling assets for production on a remote server, such as a continuous integration environment, it's recommended to use `yarn install --frozen-lockfile` to install NPM packages on the remote host to ensure that the installed packages match the `yarn.lock` file.
|
563
594
|
|
595
|
+
## Troubleshooting
|
596
|
+
|
597
|
+
See the doc page for [Troubleshooting](./docs/troubleshooting.md).
|
598
|
+
|
564
599
|
## Contributing
|
565
600
|
|
566
601
|
[![Code Helpers](https://www.codetriage.com/rails/webpacker/badges/users.svg)](https://www.codetriage.com/rails/webpacker)
|
@@ -0,0 +1,160 @@
|
|
1
|
+
# Troubleshooting
|
2
|
+
|
3
|
+
## Debugging your webpack config
|
4
|
+
|
5
|
+
1. Read the error message carefully. The error message will tell you the precise key value
|
6
|
+
that is not matching what Webpack expects.
|
7
|
+
2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
|
8
|
+
If you have a node debugger installed, you'll see the Chrome debugger for your webpack
|
9
|
+
config. For example, install the Chrome extension
|
10
|
+
[NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
|
11
|
+
set the option for the dev tools to open automatically. Or put `chrome://inspect` in the URL bar.
|
12
|
+
For more details on debugging, see the official
|
13
|
+
[Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
|
14
|
+
3. Any arguments that you add to bin/webpack get sent to webpack. For example, you can pass `--debug` to switch loaders to debug mode. See [webpack CLI debug options](https://webpack.js.org/api/cli/#debug-options) for more information on the available options.
|
15
|
+
4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-webpacker`
|
16
|
+
|
17
|
+
## ENOENT: no such file or directory - node-sass
|
18
|
+
|
19
|
+
If you get the error `ENOENT: no such file or directory - node-sass` on deploy with
|
20
|
+
`assets:precompile` or `bundle exec rails webpacker:compile` you may need to
|
21
|
+
move Sass to production `dependencies`.
|
22
|
+
|
23
|
+
Move any packages that related to Sass (e.g. `node-sass` or `sass-loader`) from
|
24
|
+
`devDependencies` to `dependencies` in `package.json`. This is because
|
25
|
+
webpacker is running on a production system with the Rails workflow to build
|
26
|
+
the assets. Particularly on hosting providers that try to detect and do the right
|
27
|
+
thing, like Heroku.
|
28
|
+
|
29
|
+
However, if you get this on local development, or not during a deploy then you
|
30
|
+
may need to rebuild `node-sass`. It's a bit of a weird error; basically, it
|
31
|
+
can't find the `node-sass` binary. An easy solution is to create a postinstall
|
32
|
+
hook to ensure `node-sass` is rebuilt whenever new modules are installed.
|
33
|
+
|
34
|
+
In `package.json`:
|
35
|
+
|
36
|
+
```json
|
37
|
+
"scripts": {
|
38
|
+
"postinstall": "npm rebuild node-sass"
|
39
|
+
}
|
40
|
+
```
|
41
|
+
|
42
|
+
## Can't find hello_react.js in manifest.json
|
43
|
+
|
44
|
+
* If you get this error `Can't find hello_react.js in manifest.json`
|
45
|
+
when loading a view in the browser it's because webpack is still compiling packs.
|
46
|
+
Webpacker uses a `manifest.json` file to keep track of packs in all environments,
|
47
|
+
however since this file is generated after packs are compiled by webpack. So,
|
48
|
+
if you load a view in browser whilst webpack is compiling you will get this error.
|
49
|
+
Therefore, make sure webpack
|
50
|
+
(i.e `./bin/webpack-dev-server`) is running and has
|
51
|
+
completed the compilation successfully before loading a view.
|
52
|
+
|
53
|
+
|
54
|
+
## throw er; // Unhandled 'error' event
|
55
|
+
|
56
|
+
* If you get this error while trying to use Elm, try rebuilding Elm. You can do
|
57
|
+
so with a postinstall hook in your `package.json`:
|
58
|
+
|
59
|
+
```
|
60
|
+
"scripts": {
|
61
|
+
"postinstall": "npm rebuild elm"
|
62
|
+
}
|
63
|
+
```
|
64
|
+
|
65
|
+
|
66
|
+
## webpack or webpack-dev-server not found
|
67
|
+
|
68
|
+
* This could happen if `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
|
69
|
+
|
70
|
+
* If you encounter the above error on heroku after upgrading from Rails 4.x to 5.1.x, then the problem might be related to missing `yarn` binstub. Please run following commands to update/add binstubs:
|
71
|
+
|
72
|
+
```bash
|
73
|
+
bundle config --delete bin
|
74
|
+
./bin/rails app:update:bin # or rails app:update:bin
|
75
|
+
```
|
76
|
+
|
77
|
+
|
78
|
+
## Running webpack on Windows
|
79
|
+
|
80
|
+
If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
|
81
|
+
for the scripts generated in `bin/webpack` and `bin/webpack-dev-server`. Instead you'll want to run the scripts
|
82
|
+
manually with Ruby:
|
83
|
+
|
84
|
+
```
|
85
|
+
C:\path>ruby bin\webpack
|
86
|
+
C:\path>ruby bin\webpack-dev-server
|
87
|
+
```
|
88
|
+
|
89
|
+
|
90
|
+
## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
|
91
|
+
|
92
|
+
If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
|
93
|
+
|
94
|
+
## Running Elm on Continuous Integration (CI) services such as CircleCI, CodeShip, Travis CI
|
95
|
+
|
96
|
+
If your tests are timing out or erroring on CI it is likely that you are experiencing the slow Elm compilation issue described here: [elm-compiler issue #1473](https://github.com/elm-lang/elm-compiler/issues/1473)
|
97
|
+
|
98
|
+
The issue is related to CPU count exposed by the underlying service. The basic solution involves using [libsysconfcpus](https://github.com/obmarg/libsysconfcpus) to change the reported CPU count.
|
99
|
+
|
100
|
+
Basic fix involves:
|
101
|
+
|
102
|
+
```bash
|
103
|
+
# install sysconfcpus on CI
|
104
|
+
git clone https://github.com/obmarg/libsysconfcpus.git $HOME/dependencies/libsysconfcpus
|
105
|
+
cd libsysconfcpus
|
106
|
+
.configure --prefix=$HOME/dependencies/sysconfcpus
|
107
|
+
make && make install
|
108
|
+
|
109
|
+
# use sysconfcpus with elm-make
|
110
|
+
mv $HOME/your_rails_app/node_modules/.bin/elm-make $HOME/your_rails_app/node_modules/.bin/elm-make-old
|
111
|
+
printf "#\041/bin/bash\n\necho \"Running elm-make with sysconfcpus -n 2\"\n\n$HOME/dependencies/sysconfcpus/bin/sysconfcpus -n 2 $HOME/your_rails_app/node_modules/.bin/elm-make-old \"\$@\"" > $HOME/your_rails_app/node_modules/.bin/elm-make
|
112
|
+
chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
|
113
|
+
```
|
114
|
+
|
115
|
+
## Rake assets:precompile fails. ExecJS::RuntimeError
|
116
|
+
This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
|
117
|
+
|
118
|
+
```ruby
|
119
|
+
// production.rb
|
120
|
+
# From
|
121
|
+
|
122
|
+
Rails.application.config.assets.js_compressor = :uglifier
|
123
|
+
|
124
|
+
# To
|
125
|
+
|
126
|
+
Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
|
127
|
+
|
128
|
+
```
|
129
|
+
|
130
|
+
### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
|
131
|
+
|
132
|
+
To silent these warnings, please update `config/webpack/environment.js`
|
133
|
+
|
134
|
+
```js
|
135
|
+
// environment.js
|
136
|
+
const webpack = require('webpack')
|
137
|
+
const { resolve } = require('path')
|
138
|
+
const { environment, config } = require('@rails/webpacker')
|
139
|
+
|
140
|
+
environment.plugins.append('ContextReplacement',
|
141
|
+
new webpack.ContextReplacementPlugin(
|
142
|
+
/angular(\\|\/)core(\\|\/)(@angular|esm5)/,
|
143
|
+
resolve(config.source_path)
|
144
|
+
)
|
145
|
+
)
|
146
|
+
```
|
147
|
+
|
148
|
+
### Compilation Fails Silently
|
149
|
+
|
150
|
+
If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
|
151
|
+
|
152
|
+
```yml
|
153
|
+
# webpacker.yml
|
154
|
+
default: &default
|
155
|
+
source_path: app/javascript
|
156
|
+
source_entry_path: packs
|
157
|
+
public_root_path: public
|
158
|
+
public_output_path: complaints_packs
|
159
|
+
webpack_compile_output: true
|
160
|
+
```
|
data/lib/webpacker/helper.rb
CHANGED
@@ -72,18 +72,6 @@ module Webpacker::Helper
|
|
72
72
|
favicon_link_tag(resolve_path_to_image(name), options)
|
73
73
|
end
|
74
74
|
|
75
|
-
# Creates a script tag that references the named pack file, as compiled by webpack per the entries list
|
76
|
-
# in package/environments/base.js. By default, this list is auto-generated to match everything in
|
77
|
-
# app/packs/entrypoints/*.js. In production mode, the digested reference is automatically looked up.
|
78
|
-
#
|
79
|
-
# Example:
|
80
|
-
#
|
81
|
-
# <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
|
82
|
-
# <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
|
83
|
-
def javascript_pack_tag(*names, **options)
|
84
|
-
javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
|
85
|
-
end
|
86
|
-
|
87
75
|
# Creates script tags that reference the js chunks from entrypoints when using split chunks API,
|
88
76
|
# as compiled by webpack per the entries list in package/environments/base.js.
|
89
77
|
# By default, this list is auto-generated to match everything in
|
@@ -92,7 +80,7 @@ module Webpacker::Helper
|
|
92
80
|
#
|
93
81
|
# Example:
|
94
82
|
#
|
95
|
-
# <%=
|
83
|
+
# <%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
|
96
84
|
# <script src="/packs/vendor-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
|
97
85
|
# <script src="/packs/calendar~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
|
98
86
|
# <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
|
@@ -101,13 +89,13 @@ module Webpacker::Helper
|
|
101
89
|
#
|
102
90
|
# DO:
|
103
91
|
#
|
104
|
-
# <%=
|
92
|
+
# <%= javascript_pack_tag 'calendar', 'map' %>
|
105
93
|
#
|
106
94
|
# DON'T:
|
107
95
|
#
|
108
|
-
# <%=
|
109
|
-
# <%=
|
110
|
-
def
|
96
|
+
# <%= javascript_pack_tag 'calendar' %>
|
97
|
+
# <%= javascript_pack_tag 'map' %>
|
98
|
+
def javascript_pack_tag(*names, **options)
|
111
99
|
javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
|
112
100
|
end
|
113
101
|
|
@@ -127,21 +115,6 @@ module Webpacker::Helper
|
|
127
115
|
end
|
128
116
|
end
|
129
117
|
|
130
|
-
# Creates a link tag that references the named pack file, as compiled by webpack per the entries list
|
131
|
-
# in package/environments/base.js. By default, this list is auto-generated to match everything in
|
132
|
-
# app/packs/entrypoints/*.js. In production mode, the digested reference is automatically looked up.
|
133
|
-
#
|
134
|
-
# Note: If the development server is running and hot module replacement is active, this will return nothing.
|
135
|
-
# In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
|
136
|
-
#
|
137
|
-
# Examples:
|
138
|
-
#
|
139
|
-
# <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
|
140
|
-
# <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
|
141
|
-
def stylesheet_pack_tag(*names, **options)
|
142
|
-
stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
|
143
|
-
end
|
144
|
-
|
145
118
|
# Creates link tags that reference the css chunks from entrypoints when using split chunks API,
|
146
119
|
# as compiled by webpack per the entries list in package/environments/base.js.
|
147
120
|
# By default, this list is auto-generated to match everything in
|
@@ -150,30 +123,27 @@ module Webpacker::Helper
|
|
150
123
|
#
|
151
124
|
# Examples:
|
152
125
|
#
|
153
|
-
# <%=
|
126
|
+
# <%= stylesheet_pack_tag 'calendar', 'map' %> # =>
|
154
127
|
# <link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
|
155
128
|
# <link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
|
156
129
|
# <link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />
|
157
130
|
#
|
158
131
|
# DO:
|
159
132
|
#
|
160
|
-
# <%=
|
133
|
+
# <%= stylesheet_pack_tag 'calendar', 'map' %>
|
161
134
|
#
|
162
135
|
# DON'T:
|
163
136
|
#
|
164
|
-
# <%=
|
165
|
-
# <%=
|
166
|
-
def
|
137
|
+
# <%= stylesheet_pack_tag 'calendar' %>
|
138
|
+
# <%= stylesheet_pack_tag 'map' %>
|
139
|
+
def stylesheet_pack_tag(*names, **options)
|
167
140
|
stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
|
168
141
|
end
|
169
142
|
|
170
143
|
private
|
171
|
-
def sources_from_manifest_entries(names, type:)
|
172
|
-
names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten
|
173
|
-
end
|
174
144
|
|
175
145
|
def sources_from_manifest_entrypoints(names, type:)
|
176
|
-
names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
|
146
|
+
names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name.to_s, type: type) }.flatten.uniq
|
177
147
|
end
|
178
148
|
|
179
149
|
def resolve_path_to_image(name, **options)
|
data/lib/webpacker/version.rb
CHANGED
data/package.json
CHANGED
data/package/utils/helpers.js
CHANGED
@@ -16,7 +16,7 @@ const resetEnv = () => {
|
|
16
16
|
|
17
17
|
const ensureTrailingSlash = (path) => (path.endsWith('/') ? path : `${path}/`)
|
18
18
|
|
19
|
-
const
|
19
|
+
const resolvedPath = (packageName) => {
|
20
20
|
try {
|
21
21
|
return require.resolve(packageName)
|
22
22
|
} catch (e) {
|
@@ -27,8 +27,10 @@ const moduleExists = (packageName) => {
|
|
27
27
|
}
|
28
28
|
}
|
29
29
|
|
30
|
+
const moduleExists = (packageName) => (!!resolvedPath(packageName))
|
31
|
+
|
30
32
|
const canProcess = (rule, fn) => {
|
31
|
-
const modulePath =
|
33
|
+
const modulePath = resolvedPath(rule)
|
32
34
|
|
33
35
|
if (modulePath) {
|
34
36
|
return fn(modulePath)
|
data/test/helper_test.rb
CHANGED
@@ -79,33 +79,6 @@ class HelperTest < ActionView::TestCase
|
|
79
79
|
favicon_pack_tag("media/images/nested/mb-icon.png", rel: "apple-touch-icon", type: "image/png")
|
80
80
|
end
|
81
81
|
|
82
|
-
def test_javascript_pack_tag
|
83
|
-
assert_equal \
|
84
|
-
%(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
|
85
|
-
javascript_pack_tag("bootstrap.js")
|
86
|
-
end
|
87
|
-
|
88
|
-
def test_javascript_pack_tag_symbol
|
89
|
-
assert_equal \
|
90
|
-
%(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
|
91
|
-
javascript_pack_tag(:bootstrap)
|
92
|
-
end
|
93
|
-
|
94
|
-
def test_javascript_pack_tag_splat
|
95
|
-
assert_equal \
|
96
|
-
%(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js" defer="defer"></script>\n) +
|
97
|
-
%(<script src="/packs/application-k344a6d59eef8632c9d1.js" defer="defer"></script>),
|
98
|
-
javascript_pack_tag("bootstrap.js", "application.js", defer: true)
|
99
|
-
end
|
100
|
-
|
101
|
-
def test_javascript_pack_tag_split_chunks
|
102
|
-
assert_equal \
|
103
|
-
%(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
|
104
|
-
%(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
|
105
|
-
%(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
|
106
|
-
javascript_packs_with_chunks_tag("application")
|
107
|
-
end
|
108
|
-
|
109
82
|
def test_preload_pack_asset
|
110
83
|
if self.class.method_defined?(:preload_link_tag)
|
111
84
|
assert_equal \
|
@@ -122,30 +95,51 @@ class HelperTest < ActionView::TestCase
|
|
122
95
|
end
|
123
96
|
end
|
124
97
|
|
125
|
-
def
|
98
|
+
def test_javascript_pack_tag
|
126
99
|
assert_equal \
|
127
|
-
%(<
|
128
|
-
%(<
|
129
|
-
%(<
|
130
|
-
|
100
|
+
%(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
|
101
|
+
%(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
|
102
|
+
%(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>\n) +
|
103
|
+
%(<script src="/packs/bootstrap-300631c4f0e0f9c865bc.js"></script>),
|
104
|
+
javascript_pack_tag("application", "bootstrap")
|
105
|
+
end
|
106
|
+
|
107
|
+
def test_javascript_pack_tag_splat
|
108
|
+
assert_equal \
|
109
|
+
%(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js" defer="defer"></script>\n) +
|
110
|
+
%(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js" defer="defer"></script>\n) +
|
111
|
+
%(<script src="/packs/application-k344a6d59eef8632c9d1.js" defer="defer"></script>),
|
112
|
+
javascript_pack_tag("application", defer: true)
|
113
|
+
end
|
114
|
+
|
115
|
+
def test_javascript_pack_tag_symbol
|
116
|
+
assert_equal \
|
117
|
+
%(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
|
118
|
+
%(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
|
119
|
+
%(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
|
120
|
+
javascript_pack_tag(:application)
|
131
121
|
end
|
132
122
|
|
133
123
|
def test_stylesheet_pack_tag
|
134
124
|
assert_equal \
|
135
|
-
%(<link rel="stylesheet" media="screen" href="/packs/
|
136
|
-
|
125
|
+
%(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
|
126
|
+
%(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
|
127
|
+
%(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
|
128
|
+
stylesheet_pack_tag("application", "hello_stimulus")
|
137
129
|
end
|
138
130
|
|
139
131
|
def test_stylesheet_pack_tag_symbol
|
140
132
|
assert_equal \
|
141
|
-
%(<link rel="stylesheet" media="screen" href="/packs/
|
142
|
-
|
133
|
+
%(<link rel="stylesheet" media="screen" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
|
134
|
+
%(<link rel="stylesheet" media="screen" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />\n) +
|
135
|
+
%(<link rel="stylesheet" media="screen" href="/packs/hello_stimulus-k344a6d59eef8632c9d1.chunk.css" />),
|
136
|
+
stylesheet_pack_tag(:application, :hello_stimulus)
|
143
137
|
end
|
144
138
|
|
145
139
|
def test_stylesheet_pack_tag_splat
|
146
140
|
assert_equal \
|
147
|
-
%(<link rel="stylesheet" media="all" href="/packs/
|
148
|
-
%(<link rel="stylesheet" media="all" href="/packs/application-
|
149
|
-
stylesheet_pack_tag("
|
141
|
+
%(<link rel="stylesheet" media="all" href="/packs/1-c20632e7baf2c81200d3.chunk.css" />\n) +
|
142
|
+
%(<link rel="stylesheet" media="all" href="/packs/application-k344a6d59eef8632c9d1.chunk.css" />),
|
143
|
+
stylesheet_pack_tag("application", media: "all")
|
150
144
|
end
|
151
145
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: webpacker
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 6.0.0.beta.
|
4
|
+
version: 6.0.0.beta.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- David Heinemeier Hansson
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-
|
12
|
+
date: 2021-02-03 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: activesupport
|
@@ -136,6 +136,7 @@ files:
|
|
136
136
|
- Rakefile
|
137
137
|
- config/README.md
|
138
138
|
- config/webpacker.yml
|
139
|
+
- docs/troubleshooting.md
|
139
140
|
- gemfiles/Gemfile-rails-edge
|
140
141
|
- gemfiles/Gemfile-rails.5.2.x
|
141
142
|
- gemfiles/Gemfile-rails.6.0.x
|
@@ -252,8 +253,8 @@ homepage: https://github.com/rails/webpacker
|
|
252
253
|
licenses:
|
253
254
|
- MIT
|
254
255
|
metadata:
|
255
|
-
source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.beta.
|
256
|
-
changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.beta.
|
256
|
+
source_code_uri: https://github.com/rails/webpacker/tree/v6.0.0.beta.5
|
257
|
+
changelog_uri: https://github.com/rails/webpacker/blob/v6.0.0.beta.5/CHANGELOG.md
|
257
258
|
post_install_message:
|
258
259
|
rdoc_options: []
|
259
260
|
require_paths:
|