webpacker 6.0.0.beta → 6.0.0.beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.github/workflows/jest.yml +1 -1
- data/.github/workflows/js-lint.yml +1 -1
- data/.github/workflows/ruby.yml +9 -6
- data/6_0_upgrade.md +29 -10
- data/CHANGELOG.md +2 -0
- data/CONTRIBUTING.md +1 -1
- data/Gemfile.lock +7 -5
- data/README.md +115 -52
- data/config/README.md +3 -0
- data/config/webpacker.yml +1 -0
- data/docs/troubleshooting.md +160 -0
- data/lib/install/config/webpacker.yml +4 -2
- data/lib/install/{javascript/packs → packs/entrypoints}/application.js +2 -2
- data/lib/install/template.rb +3 -3
- data/lib/webpacker/commands.rb +2 -1
- data/lib/webpacker/compiler.rb +2 -2
- data/lib/webpacker/dev_server_runner.rb +2 -0
- data/lib/webpacker/helper.rb +13 -43
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +1 -0
- data/package.json +1 -1
- data/package/__tests__/development.js +2 -1
- data/package/__tests__/index.js +9 -0
- data/package/environments/__tests__/base.js +4 -4
- data/package/environments/base.js +7 -4
- data/package/environments/development.js +1 -0
- data/package/environments/production.js +29 -22
- data/package/index.js +3 -3
- data/package/rules/file.js +5 -3
- data/package/rules/index.js +3 -2
- data/package/rules/raw.js +5 -0
- data/package/rules/stylus.js +26 -0
- data/package/utils/helpers.js +4 -2
- data/test/configuration_test.rb +2 -2
- data/test/dev_server_runner_test.rb +10 -2
- data/test/helper_test.rb +33 -39
- data/test/mounted_app/test/dummy/config/webpacker.yml +2 -2
- data/test/test_app/app/{javascript/packs → packs/entrypoints}/application.js +1 -1
- data/test/test_app/app/{javascript/packs → packs/entrypoints}/multi_entry.css +0 -0
- data/test/test_app/app/{javascript/packs → packs/entrypoints}/multi_entry.js +0 -0
- data/test/test_app/config/webpacker.yml +2 -2
- data/test/test_app/public/packs/manifest.json +7 -0
- metadata +17 -13
- data/lib/install/javascript/packs/application.css +0 -9
- data/package/rules/svg.js +0 -20
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/.github/workflows/jest.yml
CHANGED
data/.github/workflows/ruby.yml
CHANGED
@@ -18,7 +18,8 @@ jobs:
|
|
18
18
|
2.4,
|
19
19
|
2.5,
|
20
20
|
2.6,
|
21
|
-
2.7
|
21
|
+
2.7,
|
22
|
+
3.0
|
22
23
|
]
|
23
24
|
gemfile: [
|
24
25
|
"gemfiles/Gemfile-rails.5.2.x",
|
@@ -27,13 +28,11 @@ jobs:
|
|
27
28
|
exclude:
|
28
29
|
- ruby: "2.4"
|
29
30
|
gemfile: gemfiles/Gemfile-rails.6.0.x
|
31
|
+
- ruby: "3.0"
|
32
|
+
gemfile: gemfiles/Gemfile-rails.5.2.x
|
30
33
|
experimental: [false]
|
31
34
|
include:
|
32
|
-
- ruby:
|
33
|
-
os: ubuntu-latest
|
34
|
-
gemfile: gemfiles/Gemfile-rails.6.0.x
|
35
|
-
experimental: true
|
36
|
-
- ruby: head
|
35
|
+
- ruby: 2.5
|
37
36
|
os: ubuntu-latest
|
38
37
|
gemfile: gemfiles/Gemfile-rails-edge
|
39
38
|
experimental: true
|
@@ -45,6 +44,10 @@ jobs:
|
|
45
44
|
os: ubuntu-latest
|
46
45
|
gemfile: gemfiles/Gemfile-rails-edge
|
47
46
|
experimental: true
|
47
|
+
- ruby: 3.0
|
48
|
+
os: ubuntu-latest
|
49
|
+
gemfile: gemfiles/Gemfile-rails-edge
|
50
|
+
experimental: true
|
48
51
|
|
49
52
|
steps:
|
50
53
|
- uses: actions/checkout@v2
|
data/6_0_upgrade.md
CHANGED
@@ -6,17 +6,20 @@ straightforward.
|
|
6
6
|
|
7
7
|
## Preparation
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
1. If your `source_path` is `app/javascript`, rename it to `app/packs`
|
10
|
+
2. If your `source_entry_path` is `app/javascript/packs`, rename it to `app/packs/entrypoints`
|
11
|
+
3. Rename `config/webpack` to `config/webpack_old`
|
12
|
+
4. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
|
13
|
+
5. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
|
14
|
+
6. Upgrade webpacker
|
12
15
|
|
13
16
|
```ruby
|
14
17
|
# Gemfile
|
15
|
-
gem 'webpacker', '~> 6.
|
18
|
+
gem 'webpacker', '~> 6.0.0.pre.2'
|
16
19
|
```
|
17
20
|
|
18
|
-
```
|
19
|
-
bundle
|
21
|
+
```bash
|
22
|
+
bundle install
|
20
23
|
```
|
21
24
|
|
22
25
|
```bash
|
@@ -27,12 +30,15 @@ straightforward.
|
|
27
30
|
bundle exec rails webpacker:install
|
28
31
|
```
|
29
32
|
|
30
|
-
- Change `
|
31
|
-
`
|
33
|
+
- Change `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and
|
34
|
+
`stylesheet_pack_tag`.
|
32
35
|
|
33
|
-
|
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.
|
34
37
|
|
35
|
-
|
38
|
+
8. Copy over any custom webpack config from `config/webpack_old`
|
39
|
+
|
40
|
+
- Common code previously called 'environment' changed to 'base'
|
41
|
+
- import `environment` changed name to `webpackConfig`.
|
36
42
|
|
37
43
|
```js
|
38
44
|
// config/webpack/base.js
|
@@ -41,3 +47,16 @@ straightforward.
|
|
41
47
|
|
42
48
|
module.exports = merge(webpackConfig, customConfig)
|
43
49
|
```
|
50
|
+
|
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/CHANGELOG.md
CHANGED
@@ -17,6 +17,8 @@ environment.loaders.append('nodeModules', nodeModules)
|
|
17
17
|
- Changes `@babel/preset-env` modules option to `'auto'` per recommendation in the Babel docs [#2709](https://github.com/rails/webpacker/pull/2709)
|
18
18
|
- Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
|
19
19
|
|
20
|
+
- Fixes dev server issues [#2898](https://github.com/rails/webpacker/pull/2898)
|
21
|
+
|
20
22
|
### Breaking changes
|
21
23
|
|
22
24
|
- Simple webpack config
|
data/CONTRIBUTING.md
CHANGED
@@ -9,7 +9,7 @@ yarn
|
|
9
9
|
```
|
10
10
|
|
11
11
|
## Making sure your changes pass all tests
|
12
|
-
There are a number of automated checks which run on
|
12
|
+
There are a number of automated checks which run on GitHub Actions when a pull request is created.
|
13
13
|
You can run those checks on your own locally to make sure that your changes would not break the CI build.
|
14
14
|
|
15
15
|
### 1. Check the code for JavaScript style violations
|
data/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
webpacker (6.0.0.beta)
|
4
|
+
webpacker (6.0.0.beta.5)
|
5
5
|
activesupport (>= 5.2)
|
6
6
|
rack-proxy (>= 0.6.1)
|
7
7
|
railties (>= 5.2)
|
@@ -85,14 +85,16 @@ GEM
|
|
85
85
|
method_source (1.0.0)
|
86
86
|
mimemagic (0.3.5)
|
87
87
|
mini_mime (1.0.2)
|
88
|
-
mini_portile2 (2.
|
89
|
-
minitest (5.14.
|
88
|
+
mini_portile2 (2.5.0)
|
89
|
+
minitest (5.14.3)
|
90
90
|
nio4r (2.5.2)
|
91
|
-
nokogiri (1.
|
92
|
-
mini_portile2 (~> 2.
|
91
|
+
nokogiri (1.11.1)
|
92
|
+
mini_portile2 (~> 2.5.0)
|
93
|
+
racc (~> 1.4)
|
93
94
|
parallel (1.19.2)
|
94
95
|
parser (2.7.2.0)
|
95
96
|
ast (~> 2.4.1)
|
97
|
+
racc (1.5.2)
|
96
98
|
rack (2.2.3)
|
97
99
|
rack-proxy (0.6.5)
|
98
100
|
rack
|
data/README.md
CHANGED
@@ -59,13 +59,13 @@ 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
|
|
66
|
-
- Stylesheets -
|
67
|
-
-
|
68
|
-
-
|
66
|
+
- Stylesheets - Sass, Less, Stylus and Css, PostCSS
|
67
|
+
- CoffeeScript
|
68
|
+
- TypeScript
|
69
69
|
- React
|
70
70
|
|
71
71
|
## Installation
|
@@ -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
|
@@ -116,9 +117,9 @@ yarn install
|
|
116
117
|
Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
|
117
118
|
|
118
119
|
```yml
|
119
|
-
app/
|
120
|
-
├──
|
121
|
-
│ #
|
120
|
+
app/packs:
|
121
|
+
├── entrypoints:
|
122
|
+
│ # Only webpack entry files here
|
122
123
|
│ └── application.js
|
123
124
|
│ └── application.css
|
124
125
|
└── src:
|
@@ -129,23 +130,50 @@ app/javascript:
|
|
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
|
|
139
|
-
If you want to link a static asset for `<
|
140
|
-
can use the `asset_pack_path` helper:
|
141
|
-
|
140
|
+
If you want to link a static asset for `<img />` tag, you can use the `asset_pack_path` helper:
|
142
141
|
```erb
|
143
|
-
<link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" />
|
144
142
|
<img src="<%= asset_pack_path 'images/logo.svg' %>" />
|
145
143
|
```
|
146
144
|
|
145
|
+
Or use the dedicated helper:
|
146
|
+
```erb
|
147
|
+
<%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
|
148
|
+
<%= image_pack_tag 'picture.png', srcset: { 'picture-2x.png' => '2x' } %>
|
149
|
+
```
|
150
|
+
|
151
|
+
If you want to create a favicon:
|
152
|
+
```erb
|
153
|
+
<%= favicon_pack_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
|
154
|
+
```
|
155
|
+
|
156
|
+
If you want to preload a static asset in your `<head>`, you can use the `preload_pack_asset` helper:
|
157
|
+
```erb
|
158
|
+
<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %>
|
159
|
+
```
|
160
|
+
|
161
|
+
If you want to use images in your stylesheets:
|
162
|
+
|
163
|
+
```css
|
164
|
+
.foo {
|
165
|
+
background-image: url('../images/logo.svg')
|
166
|
+
}
|
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
|
+
|
147
174
|
**Note:** In order for your styles or static assets files to be available in your view,
|
148
|
-
you would need to link them in your "pack" or entry file.
|
175
|
+
you would need to link them in your "pack" or entry file. Otherwise, Webpack won't know
|
176
|
+
to package up those files.
|
149
177
|
|
150
178
|
### Development
|
151
179
|
|
@@ -157,11 +185,20 @@ are loaded based on your environment.
|
|
157
185
|
In development, Webpacker compiles on demand rather than upfront by default. This
|
158
186
|
happens when you refer to any of the pack assets using the Webpacker helper methods.
|
159
187
|
This means that you don't have to run any separate processes. Compilation errors are logged
|
160
|
-
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/).
|
161
198
|
|
162
|
-
|
163
|
-
|
164
|
-
|
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).
|
165
202
|
|
166
203
|
```bash
|
167
204
|
# webpack dev server
|
@@ -174,9 +211,10 @@ in the `app/javascript/packs/*.js` files and automatically reload the browser to
|
|
174
211
|
./bin/webpack
|
175
212
|
```
|
176
213
|
|
177
|
-
Once you start this development server, Webpacker will automatically start proxying all
|
178
|
-
webpack asset requests to this server. When you stop
|
179
|
-
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`
|
180
218
|
|
181
219
|
You can use environment variables as options supported by
|
182
220
|
[webpack-dev-server](https://webpack.js.org/configuration/dev-server/) in the
|
@@ -212,7 +250,7 @@ WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
|
|
212
250
|
Webpacker gives you a default set of configuration files for test, development and
|
213
251
|
production environments in `config/webpack/*.js`. You can configure each individual
|
214
252
|
environment in their respective files or configure them all in the base
|
215
|
-
`config/webpack/
|
253
|
+
`config/webpack/base.js` file.
|
216
254
|
|
217
255
|
By default, you don't need to make any changes to `config/webpack/*.js`
|
218
256
|
files since it's all standard production-ready configuration. However,
|
@@ -256,23 +294,26 @@ const { webpackConfig } = require('@rails/webpacker')
|
|
256
294
|
|
257
295
|
console.log(webpackConfig.output_path)
|
258
296
|
console.log(webpackConfig.source_path)
|
297
|
+
|
298
|
+
// Or to print out your whole webpack configuration
|
299
|
+
console.log(JSON.stringify(webpackConfig, undefined, 2))
|
259
300
|
```
|
260
301
|
|
261
302
|
### Integrations
|
262
303
|
|
263
304
|
Webpacker out of the box supports JS and static assets (fonts, images etc.)
|
264
|
-
compilation. To enable support for
|
265
|
-
relevant packages
|
305
|
+
compilation. To enable support for CoffeeScript or TypeScript install
|
306
|
+
relevant packages:
|
266
307
|
|
267
|
-
|
308
|
+
#### CoffeeScript
|
268
309
|
|
269
|
-
```
|
310
|
+
```bash
|
270
311
|
yarn add coffeescript coffee-loader
|
271
312
|
```
|
272
313
|
|
273
|
-
|
314
|
+
#### TypeScript
|
274
315
|
|
275
|
-
```
|
316
|
+
```bash
|
276
317
|
yarn add typescript @babel/preset-typescript
|
277
318
|
```
|
278
319
|
|
@@ -289,7 +330,7 @@ Add tsconfig.json
|
|
289
330
|
"moduleResolution": "node",
|
290
331
|
"baseUrl": ".",
|
291
332
|
"paths": {
|
292
|
-
"*": ["node_modules/*", "app/
|
333
|
+
"*": ["node_modules/*", "app/packs/*"]
|
293
334
|
},
|
294
335
|
"sourceMap": true,
|
295
336
|
"target": "es5",
|
@@ -302,13 +343,13 @@ Add tsconfig.json
|
|
302
343
|
|
303
344
|
#### CSS
|
304
345
|
|
305
|
-
To enable CSS support in your application, add following packages
|
346
|
+
To enable CSS support in your application, add following packages:
|
306
347
|
|
307
|
-
```
|
348
|
+
```bash
|
308
349
|
yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin
|
309
350
|
```
|
310
351
|
|
311
|
-
optionally, add css extension to webpack config for easy resolution
|
352
|
+
optionally, add the css extension to webpack config for easy resolution.
|
312
353
|
|
313
354
|
```js
|
314
355
|
// config/webpack/base.js
|
@@ -327,27 +368,33 @@ then add the relevant pre-processors:
|
|
327
368
|
|
328
369
|
#### Postcss
|
329
370
|
|
330
|
-
```
|
371
|
+
```bash
|
331
372
|
yarn add postcss-loader
|
332
373
|
```
|
333
374
|
|
334
375
|
#### Sass
|
335
376
|
|
336
|
-
```
|
337
|
-
yarn add sass-loader
|
377
|
+
```bash
|
378
|
+
yarn add sass sass-loader
|
338
379
|
```
|
339
380
|
|
340
381
|
#### Less
|
341
382
|
|
383
|
+
```bash
|
384
|
+
yarn add less less-loader
|
342
385
|
```
|
343
|
-
|
386
|
+
|
387
|
+
#### Stylus
|
388
|
+
|
389
|
+
```bash
|
390
|
+
yarn add stylus stylus-loader
|
344
391
|
```
|
345
392
|
|
346
393
|
#### React
|
347
394
|
|
348
395
|
React is supported and you just need to add relevant packages,
|
349
396
|
|
350
|
-
```
|
397
|
+
```bash
|
351
398
|
yarn add react react-dom @babel/preset-react
|
352
399
|
```
|
353
400
|
|
@@ -372,16 +419,19 @@ if you are using typescript, update your `tsconfig.json`
|
|
372
419
|
}
|
373
420
|
```
|
374
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
|
+
|
375
426
|
#### Other frameworks
|
376
427
|
|
377
428
|
Please follow webpack integration guide for relevant framework or library,
|
378
429
|
|
379
|
-
1. Svelte
|
380
|
-
2. Angular
|
381
|
-
3. Vue
|
382
|
-
|
383
|
-
For example to add Vue support,
|
430
|
+
1. [Svelte](https://github.com/sveltejs/svelte-loader#install)
|
431
|
+
2. [Angular](https://v2.angular.io/docs/ts/latest/guide/webpack.html#!#configure-webpack)
|
432
|
+
3. [Vue](https://vue-loader.vuejs.org/guide/)
|
384
433
|
|
434
|
+
For example to add Vue support:
|
385
435
|
```js
|
386
436
|
// config/webpack/rules/vue.js
|
387
437
|
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
@@ -397,7 +447,9 @@ module.exports = {
|
|
397
447
|
},
|
398
448
|
plugins: [new VueLoaderPlugin()]
|
399
449
|
}
|
450
|
+
```
|
400
451
|
|
452
|
+
```js
|
401
453
|
// config/webpack/base.js
|
402
454
|
const { webpackConfig, merge } = require('@rails/webpacker')
|
403
455
|
const vueConfig = require('./rules/vue')
|
@@ -445,11 +497,11 @@ Please note, binstubs compiles in development mode however rake tasks
|
|
445
497
|
compiles in production mode.
|
446
498
|
|
447
499
|
```bash
|
448
|
-
# Compiles in development mode unless NODE_ENV is specified
|
500
|
+
# Compiles in development mode unless NODE_ENV is specified, per the binstub source
|
449
501
|
./bin/webpack
|
450
502
|
./bin/webpack-dev-server
|
451
503
|
|
452
|
-
#
|
504
|
+
# Compiles in production mode by default unless NODE_ENV is specified, per `lib/tasks/webpacker/compile.rake`
|
453
505
|
bundle exec rails assets:precompile
|
454
506
|
bundle exec rails webpacker:compile
|
455
507
|
```
|
@@ -459,8 +511,12 @@ bundle exec rails webpacker:compile
|
|
459
511
|
You can run following commands to upgrade Webpacker to the latest stable version. This process involves upgrading the gem and related JavaScript packages:
|
460
512
|
|
461
513
|
```bash
|
514
|
+
# check your Gemfile for version restrictions
|
462
515
|
bundle update webpacker
|
516
|
+
|
517
|
+
# overwrite your changes to the default install files and revert any unwanted changes from the install
|
463
518
|
rails webpacker:install
|
519
|
+
|
464
520
|
yarn upgrade @rails/webpacker --latest
|
465
521
|
yarn upgrade webpack-dev-server --latest
|
466
522
|
|
@@ -468,6 +524,8 @@ yarn upgrade webpack-dev-server --latest
|
|
468
524
|
yarn add @rails/webpacker@next
|
469
525
|
```
|
470
526
|
|
527
|
+
Also, consult the [CHANGELOG](./CHANGELOG.md) for additional upgrade links.
|
528
|
+
|
471
529
|
## Paths
|
472
530
|
|
473
531
|
By default, Webpacker ships with simple conventions for where the JavaScript
|
@@ -475,19 +533,18 @@ app files and compiled webpack bundles will go in your Rails app.
|
|
475
533
|
All these options are configurable from `config/webpacker.yml` file.
|
476
534
|
|
477
535
|
The configuration for what webpack is supposed to compile by default rests
|
478
|
-
on the convention that every file in `app/
|
536
|
+
on the convention that every file in `app/packs/entrypoints/*`**(default)**
|
479
537
|
or whatever path you set for `source_entry_path` in the `webpacker.yml` configuration
|
480
538
|
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
|
481
539
|
an entry file. As a rule of thumb, put all files you want to link in your views inside
|
482
|
-
"packs" directory and keep everything else under `app/
|
540
|
+
"packs" directory and keep everything else under `app/packs`.
|
483
541
|
|
484
|
-
Suppose you want to change the source directory from `app/
|
542
|
+
Suppose you want to change the source directory from `app/packs`
|
485
543
|
to `frontend` and output to `assets/packs`. This is how you would do it:
|
486
544
|
|
487
545
|
```yml
|
488
546
|
# config/webpacker.yml
|
489
|
-
source_path: frontend
|
490
|
-
source_entry_path: packs
|
547
|
+
source_path: frontend # packs are in frontend/packs
|
491
548
|
public_output_path: assets/packs # outputs to => public/assets/packs
|
492
549
|
```
|
493
550
|
|
@@ -501,7 +558,9 @@ development:
|
|
501
558
|
port: 3035
|
502
559
|
```
|
503
560
|
|
504
|
-
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.
|
505
564
|
|
506
565
|
### Additional paths
|
507
566
|
|
@@ -512,7 +571,7 @@ option available in `config/webpacker.yml`. This lets you
|
|
512
571
|
add additional paths that webpack should lookup when resolving modules:
|
513
572
|
|
514
573
|
```yml
|
515
|
-
additional_paths: ['app/assets
|
574
|
+
additional_paths: ['app/assets', 'vendor/assets']
|
516
575
|
```
|
517
576
|
|
518
577
|
You can then import these items inside your modules like so:
|
@@ -533,6 +592,10 @@ Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which
|
|
533
592
|
|
534
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.
|
535
594
|
|
595
|
+
## Troubleshooting
|
596
|
+
|
597
|
+
See the doc page for [Troubleshooting](./docs/troubleshooting.md).
|
598
|
+
|
536
599
|
## Contributing
|
537
600
|
|
538
601
|
[](https://www.codetriage.com/rails/webpacker)
|