webpacker 4.0.2 → 5.4.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintrc.js +8 -8
- data/.github/workflows/jest.yml +38 -0
- data/.github/workflows/js-lint.yml +39 -0
- data/.github/workflows/rubocop.yml +39 -0
- data/.github/workflows/ruby.yml +58 -0
- data/.gitignore +1 -0
- data/.node-version +1 -1
- data/.rubocop.yml +115 -14
- data/.travis.yml +16 -18
- data/CHANGELOG.md +329 -130
- data/Gemfile +1 -1
- data/Gemfile.lock +127 -105
- data/README.md +84 -217
- data/docs/assets.md +20 -10
- data/docs/css.md +126 -7
- data/docs/deployment.md +55 -10
- data/docs/docker.md +33 -14
- data/docs/engines.md +60 -2
- data/docs/env.md +0 -2
- data/docs/es6.md +24 -5
- data/docs/integrations.md +220 -0
- data/docs/target.md +22 -0
- data/docs/testing.md +2 -3
- data/docs/troubleshooting.md +46 -7
- data/docs/typescript.md +93 -26
- data/docs/v4-upgrade.md +12 -2
- data/docs/webpack-dev-server.md +2 -2
- data/docs/webpack.md +21 -7
- data/gemfiles/Gemfile-rails-edge +2 -3
- data/gemfiles/Gemfile-rails.5.2.x +1 -2
- data/gemfiles/Gemfile-rails.6.0.x +9 -0
- data/lib/install/bin/webpack +0 -1
- data/lib/install/bin/webpack-dev-server +0 -1
- data/lib/install/coffee.rb +1 -1
- data/lib/install/config/babel.config.js +24 -12
- data/lib/install/config/webpacker.yml +3 -6
- data/lib/install/elm.rb +3 -3
- data/lib/install/erb.rb +2 -2
- data/lib/install/examples/angular/hello_angular/polyfills.ts +2 -2
- data/lib/install/examples/react/babel.config.js +31 -15
- data/lib/install/examples/react/tsconfig.json +2 -1
- data/lib/install/examples/svelte/app.svelte +11 -0
- data/lib/install/examples/svelte/hello_svelte.js +20 -0
- data/lib/install/examples/typescript/tsconfig.json +2 -1
- data/lib/install/examples/vue/hello_vue.js +2 -3
- data/lib/install/loaders/elm.js +9 -6
- data/lib/install/loaders/svelte.js +9 -0
- data/lib/install/svelte.rb +29 -0
- data/lib/install/template.rb +12 -4
- data/lib/install/typescript.rb +6 -13
- data/lib/install/vue.rb +1 -1
- data/lib/tasks/installers.rake +1 -0
- data/lib/tasks/webpacker/check_node.rake +15 -8
- data/lib/tasks/webpacker/check_yarn.rake +16 -10
- data/lib/tasks/webpacker/clean.rake +25 -0
- data/lib/tasks/webpacker/clobber.rake +8 -4
- data/lib/tasks/webpacker/compile.rake +10 -15
- data/lib/tasks/webpacker/yarn_install.rake +11 -1
- data/lib/tasks/webpacker.rake +2 -0
- data/lib/webpacker/commands.rb +53 -1
- data/lib/webpacker/compiler.rb +24 -9
- data/lib/webpacker/configuration.rb +36 -13
- data/lib/webpacker/dev_server.rb +1 -1
- data/lib/webpacker/dev_server_proxy.rb +5 -9
- data/lib/webpacker/dev_server_runner.rb +10 -4
- data/lib/webpacker/env.rb +6 -2
- data/lib/webpacker/helper.rb +71 -26
- data/lib/webpacker/manifest.rb +4 -4
- data/lib/webpacker/railtie.rb +6 -43
- data/lib/webpacker/runner.rb +1 -0
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/webpack_runner.rb +6 -0
- data/lib/webpacker.rb +9 -1
- data/package/__tests__/config.js +12 -24
- data/package/__tests__/dev_server.js +2 -0
- data/package/__tests__/development.js +14 -1
- data/package/config.js +6 -11
- data/package/configPath.js +3 -0
- data/package/config_types/config_list.js +3 -3
- data/package/config_types/config_object.js +1 -1
- data/package/dev_server.js +1 -1
- data/package/env.js +1 -2
- data/package/environments/__tests__/base.js +30 -3
- data/package/environments/base.js +20 -10
- data/package/environments/development.js +39 -37
- data/package/environments/production.js +12 -2
- data/package/rules/babel.js +12 -5
- data/package/rules/file.js +3 -2
- data/package/rules/node_modules.js +3 -4
- data/package/rules/sass.js +11 -2
- data/package/utils/__tests__/get_style_rule.js +9 -0
- data/package/utils/deep_merge.js +5 -5
- data/package/utils/get_style_rule.js +7 -12
- data/package/utils/helpers.js +10 -10
- data/package.json +43 -42
- data/test/command_test.rb +6 -0
- data/test/compiler_test.rb +10 -6
- data/test/configuration_test.rb +40 -30
- data/test/dev_server_runner_test.rb +1 -1
- data/test/dev_server_test.rb +22 -0
- data/test/helper_test.rb +58 -9
- data/test/manifest_test.rb +37 -6
- data/test/rake_tasks_test.rb +17 -0
- data/test/test_app/app/javascript/packs/multi_entry.css +4 -0
- data/test/test_app/app/javascript/packs/multi_entry.js +4 -0
- data/test/test_app/bin/webpack +0 -1
- data/test/test_app/bin/webpack-dev-server +0 -1
- data/test/test_app/config/application.rb +0 -1
- data/test/test_app/config/webpacker.yml +8 -1
- data/test/test_app/public/packs/manifest.json +4 -0
- data/test/webpack_runner_test.rb +1 -1
- data/webpacker.gemspec +7 -4
- data/yarn.lock +4552 -4077
- metadata +73 -19
- data/gemfiles/Gemfile-rails.4.2.x +0 -10
- data/gemfiles/Gemfile-rails.5.0.x +0 -10
- data/gemfiles/Gemfile-rails.5.1.x +0 -10
- data/lib/install/loaders/typescript.js +0 -11
data/docs/troubleshooting.md
CHANGED
@@ -1,16 +1,41 @@
|
|
1
1
|
# Troubleshooting
|
2
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 [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
|
10
|
+
set the option for the dev tools to open automatically. For more details on debugging,
|
11
|
+
see the official [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
|
12
|
+
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.
|
13
|
+
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`
|
3
14
|
|
4
15
|
## ENOENT: no such file or directory - node-sass
|
5
16
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
basically, it can't find the `node-sass` binary.
|
10
|
-
An easy solution is to create a postinstall hook - `npm rebuild node-sass` in
|
11
|
-
`package.json` and that will ensure `node-sass` is rebuilt whenever
|
12
|
-
you install any new modules.
|
17
|
+
If you get the error `ENOENT: no such file or directory - node-sass` on deploy with
|
18
|
+
`assets:precompile` or `bundle exec rails webpacker:compile` you may need to
|
19
|
+
move Sass to production `dependencies`.
|
13
20
|
|
21
|
+
Move any packages that related to Sass (e.g. `node-sass` or `sass-loader`) from
|
22
|
+
`devDependencies` to `dependencies` in `package.json`. This is because
|
23
|
+
webpacker is running on a production system with the Rails workflow to build
|
24
|
+
the assets. Particularly on hosting providers that try to detect and do the right
|
25
|
+
thing, like Heroku.
|
26
|
+
|
27
|
+
However, if you get this on local development, or not during a deploy then you
|
28
|
+
may need to rebuild `node-sass`. It's a bit of a weird error; basically, it
|
29
|
+
can't find the `node-sass` binary. An easy solution is to create a postinstall
|
30
|
+
hook to ensure `node-sass` is rebuilt whenever new modules are installed.
|
31
|
+
|
32
|
+
In `package.json`:
|
33
|
+
|
34
|
+
```json
|
35
|
+
"scripts": {
|
36
|
+
"postinstall": "npm rebuild node-sass"
|
37
|
+
}
|
38
|
+
```
|
14
39
|
|
15
40
|
## Can't find hello_react.js in manifest.json
|
16
41
|
|
@@ -117,3 +142,17 @@ environment.plugins.append('ContextReplacement',
|
|
117
142
|
)
|
118
143
|
)
|
119
144
|
```
|
145
|
+
|
146
|
+
### Compilation Fails Silently
|
147
|
+
|
148
|
+
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)
|
149
|
+
|
150
|
+
```yml
|
151
|
+
# webpacker.yml
|
152
|
+
default: &default
|
153
|
+
source_path: app/javascript
|
154
|
+
source_entry_path: packs
|
155
|
+
public_root_path: public
|
156
|
+
public_output_path: complaints_packs
|
157
|
+
webpack_compile_output: true
|
158
|
+
```
|
data/docs/typescript.md
CHANGED
@@ -1,55 +1,122 @@
|
|
1
|
-
#
|
1
|
+
# TypeScript
|
2
2
|
|
3
|
+
## Installation
|
3
4
|
|
4
|
-
|
5
|
+
1. Run the TypeScript installer
|
5
6
|
|
6
|
-
|
7
|
+
```bash
|
8
|
+
bundle exec rails webpacker:install:typescript
|
9
|
+
```
|
10
|
+
|
11
|
+
After that, a new file called `hello_typescript.ts` will be present in your `packs` directory (or rather the `source_entry_path` of your `webpacker.yml` configuration). You're now ready to write TypeScript.
|
12
|
+
|
13
|
+
## (Optional) Adding Compile-Time Type Checking
|
14
|
+
|
15
|
+
The default installation only transpiles your TypeScript code using Babel. If you would like to enable type checking as part of the Webpack compilation process (i.e. fail the build if there are TS errors), you can do the following:
|
16
|
+
|
17
|
+
1. Install the Fork TS Checker Webpack Plugin
|
18
|
+
|
19
|
+
```sh
|
20
|
+
yarn add --dev fork-ts-checker-webpack-plugin
|
21
|
+
```
|
22
|
+
|
23
|
+
2. Then add it to your development environment config in `config/webpack/development.js`
|
24
|
+
|
25
|
+
```js
|
26
|
+
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
|
27
|
+
const path = require("path");
|
28
|
+
|
29
|
+
environment.plugins.append(
|
30
|
+
"ForkTsCheckerWebpackPlugin",
|
31
|
+
new ForkTsCheckerWebpackPlugin({
|
32
|
+
typescript: {
|
33
|
+
configFile: path.resolve(__dirname, "../../tsconfig.json"),
|
34
|
+
},
|
35
|
+
async: false,
|
36
|
+
})
|
37
|
+
);
|
38
|
+
```
|
39
|
+
|
40
|
+
If you are `fork-ts-checker-webpack-plugin` older than 5.0, the `tsconfig` option also needs to be specified:
|
41
|
+
|
42
|
+
```js
|
43
|
+
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
|
44
|
+
const path = require("path");
|
45
|
+
|
46
|
+
environment.plugins.append(
|
47
|
+
"ForkTsCheckerWebpackPlugin",
|
48
|
+
new ForkTsCheckerWebpackPlugin({
|
49
|
+
// this is a relative path to your project's TypeScript config
|
50
|
+
tsconfig: path.resolve(__dirname, "../../tsconfig.json"),
|
51
|
+
// non-async so type checking will block compilation
|
52
|
+
async: false,
|
53
|
+
})
|
54
|
+
);
|
55
|
+
```
|
56
|
+
|
57
|
+
## Upgrading to 5.1
|
58
|
+
|
59
|
+
If you update your App to `webpacker >= 5.1` and had TypeScript installed before, you need to add some new/remove some old configurations:
|
60
|
+
|
61
|
+
1. Remove old packages:
|
62
|
+
- `yarn remove ts-loader`
|
63
|
+
|
64
|
+
2. Add new packages:
|
65
|
+
- `yarn add @babel/preset-typescript`
|
66
|
+
|
67
|
+
3. Remove old configuration files:
|
68
|
+
- Delete this file: `config/webpack/loaders/typescript.js`
|
69
|
+
|
70
|
+
4. Remove the following lines from `config/webpack/environment.js`:
|
71
|
+
- `const typescript = require('./loaders/typescript')`
|
72
|
+
- `environment.loaders.prepend('typescript', typescript)`
|
73
|
+
|
74
|
+
5. Add the TypeScript preset to your `babel.config.js`:
|
75
|
+
- This line `['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]` has to be added as the last item to the `presets` array in your `babel.config.js`
|
76
|
+
|
77
|
+
### Upgrading to 5.1 for Vue users
|
78
|
+
|
79
|
+
1. Remove old packages:
|
80
|
+
- `yarn remove ts-loader pnp-webpack-plugin`
|
81
|
+
|
82
|
+
2. Follow point 3 and 4 from the `TypeScript with Vue components` section
|
83
|
+
|
84
|
+
## TypeScript with React
|
85
|
+
|
86
|
+
1. Setup react using Webpacker [react installer](../README.md#react). Then run the TypeScript installer
|
7
87
|
|
8
88
|
```bash
|
9
89
|
bundle exec rails webpacker:install:typescript
|
10
|
-
yarn add @types/react @types/react-dom
|
11
90
|
```
|
12
91
|
|
13
|
-
2. Rename the generated `hello_react.js` to `hello_react.tsx`. Make the file valid
|
14
|
-
now you can use
|
92
|
+
2. Rename the generated `hello_react.js` to `hello_react.tsx`. Make the file valid TypeScript and
|
93
|
+
now you can use TypeScript, JSX with React.
|
15
94
|
|
16
|
-
##
|
95
|
+
## TypeScript with Vue components
|
17
96
|
|
18
|
-
1. Setup
|
97
|
+
1. Setup Vue using the Webpacker [Vue installer](../README.md#vue). Then run the TypeScript installer
|
19
98
|
|
20
99
|
```bash
|
21
100
|
bundle exec rails webpacker:install:typescript
|
22
101
|
```
|
23
102
|
|
24
103
|
2. Rename generated `hello_vue.js` to `hello_vue.ts`.
|
25
|
-
3.
|
104
|
+
3. Install the right Babel preset: `yarn add babel-preset-typescript-vue`
|
105
|
+
4. Change the generated `babel.config.js` from
|
26
106
|
|
27
107
|
```js
|
28
|
-
|
29
|
-
test: /\.(ts|tsx)?(\.erb)?$/,
|
30
|
-
use: [{
|
31
|
-
loader: 'ts-loader'
|
32
|
-
}]
|
33
|
-
}
|
108
|
+
["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]
|
34
109
|
```
|
35
110
|
|
36
111
|
to
|
37
112
|
|
38
113
|
```js
|
39
|
-
|
40
|
-
test: /\.(ts|tsx)?(\.erb)?$/,
|
41
|
-
use: [{
|
42
|
-
loader: 'ts-loader',
|
43
|
-
options: {
|
44
|
-
appendTsSuffixTo: [/\.vue$/]
|
45
|
-
}
|
46
|
-
}]
|
47
|
-
}
|
114
|
+
["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
|
48
115
|
```
|
49
116
|
|
50
|
-
and now you can use `<script lang="ts">` in your `.vue` component files.
|
117
|
+
and now you can use `<script lang="ts">` in your `.vue` component files. See [the babel-preset-typescript-vue docs](https://www.npmjs.com/package/babel-preset-typescript-vue) for more info.
|
51
118
|
|
52
|
-
## HTML templates with
|
119
|
+
## HTML templates with TypeScript and Angular
|
53
120
|
|
54
121
|
After you have installed Angular using `bundle exec rails webpacker:install:angular`
|
55
122
|
you would need to follow these steps to add HTML templates support:
|
data/docs/v4-upgrade.md
CHANGED
@@ -5,7 +5,7 @@ To update a Webpacker v3.5 app to v4, follow these steps:
|
|
5
5
|
|
6
6
|
1. Update the `webpacker` gem and the `@rails/webpacker` package to v4. This will upgrade Webpack itself from 3.x to 4.x, make sure you're aware of [any deprecations which might effect you](https://webpack.js.org/migrate/4/). Also make sure any other packages you depend on support Webpack 4 and don't require any changes, e.g. if you explicitly include `webpack` you need to upgrade it to 4.x, and if you use `webpack-dev-server` you need to upgrade it to 3.x.
|
7
7
|
|
8
|
-
2. Browser support definitions have been moved
|
8
|
+
2. Browser support definitions have been moved from [`.browserslistrc`](../lib/install/config/.browserslistrc) to `/`.
|
9
9
|
|
10
10
|
3. Merge any differences between [`config/webpacker.yml`](../lib/install/config/webpacker.yml) and your `config/webpacker.yml`.
|
11
11
|
|
@@ -104,7 +104,7 @@ If you want to keep the old behavior source maps can be disabled in any environm
|
|
104
104
|
// config/webpack/production.js
|
105
105
|
|
106
106
|
const environment = require('./environment')
|
107
|
-
environment.config.merge({ devtool:
|
107
|
+
environment.config.merge({ devtool: false })
|
108
108
|
|
109
109
|
module.exports = environment.toWebpackConfig()
|
110
110
|
```
|
@@ -125,6 +125,16 @@ The compiled packs in the public directory are now stored under namespaces:
|
|
125
125
|
"runtime~hello_react" => "/packs/js/runtime~hello_react-da2baf7fd07b0e8b6d17.js"
|
126
126
|
```
|
127
127
|
|
128
|
+
## Upgrading projects with custom Webpack setups that use only the view helpers
|
129
|
+
The default value for `extract_css` is **false** in `config/webpack.yml`. Custom webpack builds that extract the CSS such as often used with [React on Rails](https://github.com/shakacode/react_on_rails) should set this value to true or else no CSS link tags are generated.
|
130
|
+
|
131
|
+
```yml
|
132
|
+
default: &default
|
133
|
+
# other stuff
|
134
|
+
extract_css: true
|
135
|
+
# by default, extract and emit a css file. The default is false
|
136
|
+
```
|
137
|
+
|
128
138
|
## Example Upgrades
|
129
139
|
|
130
140
|
This is what an upgrade to Webpacker 4 looked like for existing Rails apps (please contribute yours!):
|
data/docs/webpack-dev-server.md
CHANGED
@@ -19,7 +19,7 @@ Now if you refresh your Rails view everything should work as expected.
|
|
19
19
|
Webpacker out-of-the-box supports HMR with `webpack-dev-server` and
|
20
20
|
you can toggle it by setting `dev_server/hmr` option inside `webpacker.yml`.
|
21
21
|
|
22
|
-
|
22
|
+
Check out this guide for more information:
|
23
23
|
|
24
24
|
- https://webpack.js.org/configuration/dev-server/#devserver-hot
|
25
25
|
|
@@ -38,7 +38,7 @@ If you use Nginx in development to proxy requests to your Rails server from
|
|
38
38
|
another domain, like `myapp.dev`, the Webpacker middleware will be able to
|
39
39
|
forward requests for "packs" to the webpack dev server.
|
40
40
|
|
41
|
-
If you're using `inline` mode
|
41
|
+
If you're using `inline` mode behind Nginx, you may also need to provide the
|
42
42
|
hostname to webpack dev server so it can initiate the websocket connection for
|
43
43
|
live reloading ([Webpack
|
44
44
|
docs](https://webpack.js.org/configuration/dev-server/#devserver-public)).
|
data/docs/webpack.md
CHANGED
@@ -146,7 +146,7 @@ environment.loaders.insert('svg', {
|
|
146
146
|
}
|
147
147
|
}
|
148
148
|
])
|
149
|
-
}, {
|
149
|
+
}, { before: 'file' })
|
150
150
|
|
151
151
|
const fileLoader = environment.loaders.get('file')
|
152
152
|
fileLoader.exclude = /\.(svg)$/i
|
@@ -189,9 +189,10 @@ const { environment } = require('@rails/webpacker')
|
|
189
189
|
const merge = require('webpack-merge')
|
190
190
|
|
191
191
|
const myCssLoaderOptions = {
|
192
|
-
modules:
|
192
|
+
modules: {
|
193
|
+
localIdentName: '[name]__[local]___[hash:base64:5]'
|
194
|
+
},
|
193
195
|
sourceMap: true,
|
194
|
-
localIdentName: '[name]__[local]___[hash:base64:5]'
|
195
196
|
}
|
196
197
|
|
197
198
|
const CSSLoader = environment.loaders.get('sass').use.find(el => el.loader === 'css-loader')
|
@@ -221,7 +222,7 @@ const webpack = require('webpack')
|
|
221
222
|
|
222
223
|
// Get a pre-configured plugin
|
223
224
|
const manifestPlugin = environment.plugins.get('Manifest')
|
224
|
-
manifestPlugin.
|
225
|
+
manifestPlugin.options.writeToFileEmit = false
|
225
226
|
|
226
227
|
// Add an additional plugin of your choosing : ProvidePlugin
|
227
228
|
environment.plugins.prepend(
|
@@ -261,7 +262,7 @@ environment.resolvedModules.append('vendor', 'vendor')
|
|
261
262
|
```
|
262
263
|
|
263
264
|
### Add SplitChunks (Webpack V4)
|
264
|
-
Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible
|
265
|
+
Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible.
|
265
266
|
|
266
267
|
Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
|
267
268
|
|
@@ -269,7 +270,6 @@ For the full configuration options of SplitChunks, see the [Webpack documentatio
|
|
269
270
|
|
270
271
|
```js
|
271
272
|
// config/webpack/environment.js
|
272
|
-
const WebpackAssetsManifest = require('webpack-assets-manifest');
|
273
273
|
|
274
274
|
// Enable the default config
|
275
275
|
environment.splitChunks()
|
@@ -278,7 +278,7 @@ environment.splitChunks()
|
|
278
278
|
environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
|
279
279
|
```
|
280
280
|
|
281
|
-
Then use
|
281
|
+
Then use the `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` helpers to include all the transpiled
|
282
282
|
packs with the chunks in your view, which creates html tags for all the chunks.
|
283
283
|
|
284
284
|
```erb
|
@@ -305,6 +305,20 @@ get duplicated chunks on the page.
|
|
305
305
|
|
306
306
|
For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
|
307
307
|
|
308
|
+
#### Preloading
|
309
|
+
|
310
|
+
Before preload or prefetch your assets, please read [https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content).
|
311
|
+
|
312
|
+
Webpack also provide it's own methods for preload or prefetch [https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c](https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c).
|
313
|
+
|
314
|
+
You can preload your assets with the `preload_pack_asset` helper if you have Rails >= 5.2.x.
|
315
|
+
|
316
|
+
```erb
|
317
|
+
<%= preload_pack_asset 'fonts/fa-regular-400.woff2' %>
|
318
|
+
```
|
319
|
+
|
320
|
+
**Warning:** You don't want to preload the css, you want to preload the fonts and images inside the css so that fonts, css, and images can all be downloaded in parallel instead of waiting for the browser to parse the css.
|
321
|
+
|
308
322
|
### Add common chunks (deprecated in Webpack V4)
|
309
323
|
|
310
324
|
The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in the cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from the cache, rather than being forced to load a larger bundle whenever a new page is visited.
|
data/gemfiles/Gemfile-rails-edge
CHANGED
@@ -2,12 +2,11 @@ source "https://rubygems.org"
|
|
2
2
|
|
3
3
|
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
|
4
4
|
|
5
|
-
|
5
|
+
gemspec path: "../"
|
6
6
|
|
7
|
-
gem "rails", github: "rails/rails"
|
7
|
+
gem "rails", github: "rails/rails", branch: "main"
|
8
8
|
gem "arel", github: "rails/arel"
|
9
9
|
gem "rake", ">= 11.1"
|
10
|
-
gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
|
11
10
|
gem "rack-proxy", require: false
|
12
11
|
gem "minitest", "~> 5.0"
|
13
12
|
gem "byebug"
|
@@ -1,10 +1,9 @@
|
|
1
1
|
source "https://rubygems.org"
|
2
2
|
|
3
|
-
|
3
|
+
gemspec path: "../"
|
4
4
|
|
5
5
|
gem "rails", "~> 5.2.0"
|
6
6
|
gem "rake", ">= 11.1"
|
7
|
-
gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
|
8
7
|
gem "rack-proxy", require: false
|
9
8
|
gem "minitest", "~> 5.0"
|
10
9
|
gem "byebug"
|
data/lib/install/bin/webpack
CHANGED
data/lib/install/coffee.rb
CHANGED
@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/coffee.js", Rails.root.join("config/webpack/loader
|
|
6
6
|
say "Adding coffee loader to config/webpack/environment.js"
|
7
7
|
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
|
8
8
|
"const coffee = require('./loaders/coffee')\n",
|
9
|
-
after:
|
9
|
+
after: /require\(('|")@rails\/webpacker\1\);?\n/
|
10
10
|
|
11
11
|
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
|
12
12
|
"environment.loaders.prepend('coffee', coffee)\n",
|
@@ -18,7 +18,7 @@ module.exports = function(api) {
|
|
18
18
|
return {
|
19
19
|
presets: [
|
20
20
|
isTestEnv && [
|
21
|
-
|
21
|
+
'@babel/preset-env',
|
22
22
|
{
|
23
23
|
targets: {
|
24
24
|
node: 'current'
|
@@ -26,41 +26,53 @@ module.exports = function(api) {
|
|
26
26
|
}
|
27
27
|
],
|
28
28
|
(isProductionEnv || isDevelopmentEnv) && [
|
29
|
-
|
29
|
+
'@babel/preset-env',
|
30
30
|
{
|
31
31
|
forceAllTransforms: true,
|
32
32
|
useBuiltIns: 'entry',
|
33
|
+
corejs: 3,
|
33
34
|
modules: false,
|
34
35
|
exclude: ['transform-typeof-symbol']
|
35
36
|
}
|
36
37
|
]
|
37
38
|
].filter(Boolean),
|
38
39
|
plugins: [
|
39
|
-
|
40
|
-
|
41
|
-
isTestEnv &&
|
42
|
-
|
40
|
+
'babel-plugin-macros',
|
41
|
+
'@babel/plugin-syntax-dynamic-import',
|
42
|
+
isTestEnv && 'babel-plugin-dynamic-import-node',
|
43
|
+
'@babel/plugin-transform-destructuring',
|
43
44
|
[
|
44
|
-
|
45
|
+
'@babel/plugin-proposal-class-properties',
|
45
46
|
{
|
46
47
|
loose: true
|
47
48
|
}
|
48
49
|
],
|
49
50
|
[
|
50
|
-
|
51
|
+
'@babel/plugin-proposal-object-rest-spread',
|
51
52
|
{
|
52
53
|
useBuiltIns: true
|
53
54
|
}
|
54
55
|
],
|
55
56
|
[
|
56
|
-
|
57
|
+
'@babel/plugin-proposal-private-methods',
|
57
58
|
{
|
58
|
-
|
59
|
-
|
59
|
+
loose: true
|
60
|
+
}
|
61
|
+
],
|
62
|
+
[
|
63
|
+
'@babel/plugin-proposal-private-property-in-object',
|
64
|
+
{
|
65
|
+
loose: true
|
66
|
+
}
|
67
|
+
],
|
68
|
+
[
|
69
|
+
'@babel/plugin-transform-runtime',
|
70
|
+
{
|
71
|
+
helpers: false
|
60
72
|
}
|
61
73
|
],
|
62
74
|
[
|
63
|
-
|
75
|
+
'@babel/plugin-transform-regenerator',
|
64
76
|
{
|
65
77
|
async: false
|
66
78
|
}
|
@@ -6,12 +6,11 @@ default: &default
|
|
6
6
|
public_root_path: public
|
7
7
|
public_output_path: packs
|
8
8
|
cache_path: tmp/cache/webpacker
|
9
|
-
|
10
|
-
webpack_compile_output: false
|
9
|
+
webpack_compile_output: true
|
11
10
|
|
12
11
|
# Additional paths webpack should lookup modules
|
13
12
|
# ['app/assets', 'engine/foo/app/assets']
|
14
|
-
|
13
|
+
additional_paths: []
|
15
14
|
|
16
15
|
# Reload manifest.json on all requests so we reload latest compiled packs
|
17
16
|
cache_manifest: false
|
@@ -52,9 +51,6 @@ development:
|
|
52
51
|
<<: *default
|
53
52
|
compile: true
|
54
53
|
|
55
|
-
# Verifies that versions and hashed value of the package contents in the project's package.json
|
56
|
-
check_yarn_integrity: true
|
57
|
-
|
58
54
|
# Reference: https://webpack.js.org/configuration/dev-server/
|
59
55
|
dev_server:
|
60
56
|
https: false
|
@@ -69,6 +65,7 @@ development:
|
|
69
65
|
disable_host_check: true
|
70
66
|
use_local_ip: false
|
71
67
|
quiet: false
|
68
|
+
pretty: false
|
72
69
|
headers:
|
73
70
|
'Access-Control-Allow-Origin': '*'
|
74
71
|
watch_options:
|
data/lib/install/elm.rb
CHANGED
@@ -6,7 +6,7 @@ copy_file "#{__dir__}/loaders/elm.js", Rails.root.join("config/webpack/loaders/e
|
|
6
6
|
say "Adding elm loader to config/webpack/environment.js"
|
7
7
|
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
|
8
8
|
"const elm = require('./loaders/elm')\n",
|
9
|
-
after:
|
9
|
+
after: /require\(('|")@rails\/webpacker\1\);?\n/
|
10
10
|
|
11
11
|
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
|
12
12
|
"environment.loaders.prepend('elm', elm)\n",
|
@@ -24,13 +24,13 @@ say "Installing all Elm dependencies"
|
|
24
24
|
run "yarn add elm elm-webpack-loader"
|
25
25
|
run "yarn add --dev elm-hot-webpack-loader"
|
26
26
|
run "yarn run elm init"
|
27
|
-
run "yarn run elm make"
|
27
|
+
run "yarn run elm make #{Webpacker.config.source_path}/Main.elm"
|
28
28
|
|
29
29
|
say "Updating webpack paths to include .elm file extension"
|
30
30
|
insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /\s+extensions:\n/
|
31
31
|
|
32
32
|
say "Updating Elm source location"
|
33
|
-
gsub_file "elm.json", /\"
|
33
|
+
gsub_file "elm.json", /\"src\"\n/,
|
34
34
|
%("#{Webpacker.config.source_path.relative_path_from(Rails.root)}"\n)
|
35
35
|
|
36
36
|
say "Updating .gitignore to include elm-stuff folder"
|
data/lib/install/erb.rb
CHANGED
@@ -5,8 +5,8 @@ copy_file "#{__dir__}/loaders/erb.js", Rails.root.join("config/webpack/loaders/e
|
|
5
5
|
|
6
6
|
say "Adding erb loader to config/webpack/environment.js"
|
7
7
|
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
|
8
|
-
"const erb =
|
9
|
-
after:
|
8
|
+
"const erb = require('./loaders/erb')\n",
|
9
|
+
after: /require\(('|")@rails\/webpacker\1\);?\n/
|
10
10
|
|
11
11
|
insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
|
12
12
|
"environment.loaders.prepend('erb', erb)\n",
|
@@ -38,8 +38,8 @@
|
|
38
38
|
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
39
39
|
|
40
40
|
/** Evergreen browsers require these. **/
|
41
|
-
import 'core-js/
|
42
|
-
import 'core-js/
|
41
|
+
import 'core-js/es/reflect';
|
42
|
+
import 'core-js/proposals/reflect-metadata';
|
43
43
|
|
44
44
|
|
45
45
|
/**
|
@@ -18,24 +18,27 @@ module.exports = function(api) {
|
|
18
18
|
return {
|
19
19
|
presets: [
|
20
20
|
isTestEnv && [
|
21
|
-
|
21
|
+
'@babel/preset-env',
|
22
22
|
{
|
23
23
|
targets: {
|
24
24
|
node: 'current'
|
25
|
-
}
|
26
|
-
|
25
|
+
},
|
26
|
+
modules: 'commonjs'
|
27
|
+
},
|
28
|
+
'@babel/preset-react'
|
27
29
|
],
|
28
30
|
(isProductionEnv || isDevelopmentEnv) && [
|
29
|
-
|
31
|
+
'@babel/preset-env',
|
30
32
|
{
|
31
33
|
forceAllTransforms: true,
|
32
34
|
useBuiltIns: 'entry',
|
35
|
+
corejs: 3,
|
33
36
|
modules: false,
|
34
37
|
exclude: ['transform-typeof-symbol']
|
35
38
|
}
|
36
39
|
],
|
37
40
|
[
|
38
|
-
|
41
|
+
'@babel/preset-react',
|
39
42
|
{
|
40
43
|
development: isDevelopmentEnv || isTestEnv,
|
41
44
|
useBuiltIns: true
|
@@ -43,37 +46,50 @@ module.exports = function(api) {
|
|
43
46
|
]
|
44
47
|
].filter(Boolean),
|
45
48
|
plugins: [
|
46
|
-
|
47
|
-
|
48
|
-
isTestEnv &&
|
49
|
-
|
49
|
+
'babel-plugin-macros',
|
50
|
+
'@babel/plugin-syntax-dynamic-import',
|
51
|
+
isTestEnv && 'babel-plugin-dynamic-import-node',
|
52
|
+
'@babel/plugin-transform-destructuring',
|
50
53
|
[
|
51
|
-
|
54
|
+
'@babel/plugin-proposal-class-properties',
|
52
55
|
{
|
53
56
|
loose: true
|
54
57
|
}
|
55
58
|
],
|
56
59
|
[
|
57
|
-
|
60
|
+
'@babel/plugin-proposal-object-rest-spread',
|
58
61
|
{
|
59
62
|
useBuiltIns: true
|
60
63
|
}
|
61
64
|
],
|
62
65
|
[
|
63
|
-
|
66
|
+
'@babel/plugin-proposal-private-methods',
|
67
|
+
{
|
68
|
+
loose: true
|
69
|
+
}
|
70
|
+
],
|
71
|
+
[
|
72
|
+
'@babel/plugin-proposal-private-property-in-object',
|
73
|
+
{
|
74
|
+
loose: true
|
75
|
+
}
|
76
|
+
],
|
77
|
+
[
|
78
|
+
'@babel/plugin-transform-runtime',
|
64
79
|
{
|
65
80
|
helpers: false,
|
66
|
-
regenerator: true
|
81
|
+
regenerator: true,
|
82
|
+
corejs: false
|
67
83
|
}
|
68
84
|
],
|
69
85
|
[
|
70
|
-
|
86
|
+
'@babel/plugin-transform-regenerator',
|
71
87
|
{
|
72
88
|
async: false
|
73
89
|
}
|
74
90
|
],
|
75
91
|
isProductionEnv && [
|
76
|
-
|
92
|
+
'babel-plugin-transform-react-remove-prop-types',
|
77
93
|
{
|
78
94
|
removeImport: true
|
79
95
|
}
|