shakapacker 6.1.1 → 6.2.0
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/CHANGELOG.md +16 -2
- data/Gemfile.lock +1 -1
- data/README.md +31 -15
- data/docs/customizing_babel_config.md +2 -0
- data/docs/style_loader_vs_mini_css.md +48 -0
- data/docs/using_esbuild_loader.md +1 -1
- data/docs/using_swc_loader.md +2 -2
- data/docs/v6_upgrade.md +69 -73
- data/lib/install/config/webpacker.yml +14 -0
- data/lib/install/template.rb +2 -2
- data/lib/webpacker/commands.rb +2 -2
- data/lib/webpacker/compiler.rb +1 -1
- data/lib/webpacker/configuration.rb +12 -4
- data/lib/webpacker/dev_server.rb +11 -2
- data/lib/webpacker/helper.rb +0 -7
- data/lib/webpacker/instance.rb +1 -1
- data/lib/webpacker/manifest.rb +3 -3
- data/lib/webpacker/railtie.rb +7 -0
- data/lib/webpacker/version.rb +1 -1
- data/lib/webpacker/version_checker.rb +152 -0
- data/package/__tests__/config.js +11 -0
- data/package/config.js +6 -0
- data/package/environments/base.js +1 -1
- data/package/inliningCss.js +1 -1
- data/package/rules/__tests__/file.js +35 -0
- data/package/rules/__tests__/index.js +11 -0
- data/package/rules/__tests__/raw.js +18 -0
- data/package/rules/file.js +2 -17
- data/package/rules/raw.js +2 -2
- data/package/swc/index.js +3 -3
- data/package.json +1 -1
- data/test/configuration_test.rb +24 -3
- data/test/fixtures/beta_package.json +13 -0
- data/test/fixtures/git_url_package.json +13 -0
- data/test/fixtures/github_url_package.json +13 -0
- data/test/fixtures/normal_package.json +13 -0
- data/test/fixtures/relative_path_package.json +13 -0
- data/test/fixtures/semver_caret_package.json +13 -0
- data/test/fixtures/semver_tilde_package.json +13 -0
- data/test/fixtures/without_package.json +13 -0
- data/test/helper_test.rb +12 -12
- data/test/test_app/config/webpacker.yml +4 -0
- data/test/test_app/config/webpacker_manifest_path.yml +80 -0
- data/test/version_checker_test.rb +271 -0
- data/test/webpacker_test.rb +15 -0
- metadata +28 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c6e31a49e348719f7663178aee3ec877d3a53f6bd9e264fd8e82278ac17070e7
|
4
|
+
data.tar.gz: c2d9294063be7bab761baf8f10eeb82c350dfcc0bfc322cac52fa06fdb4cbef5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6cb3b71113fd1c7aad90098a4b0927830347feafe9cb9ef245aa6551950d67b9488be5d9aa411fcb6f775260856189d9cbfc5899732113fffbd7549aee84b7ef
|
7
|
+
data.tar.gz: 1729dccb33de9f34a2c3ca26268c79255e813a71fae548acd5066d7faaef30e4a58123955a32e7b48c19bb988cd078f407cbdcebae6bcf817522451914fbac7e
|
data/.node-version
CHANGED
@@ -1 +1 @@
|
|
1
|
-
16
|
1
|
+
16.14.0
|
data/CHANGELOG.md
CHANGED
@@ -7,6 +7,19 @@ Changes since last non-beta release.
|
|
7
7
|
|
8
8
|
*Please add entries here for your pull requests that are not yet released.*
|
9
9
|
|
10
|
+
## [v6.2.0] - March 22, 2022
|
11
|
+
|
12
|
+
### Added
|
13
|
+
- Make manifest_path configurable, to keep manifest.json private if desired. [PR 78](https://github.com/shakacode/shakapacker/pull/78) by [jdelStrother](https://github.com/jdelStrother).
|
14
|
+
- Rewrite webpack module rules as regular expressions. Allows for easy iteration during config customization. [PR 60](https://github.com/shakacode/shakapacker/pull/60) by [blnoonan](https://github.com/blnoonan).
|
15
|
+
- Initialization check to ensure shakapacker gem and NPM package version are consistent. Opt-in behaviour enabled by setting `ensure_consistent_versioning` configuration variable. [PR 51](https://github.com/shakacode/shakapacker/pull/51) by [tomdracz](https://github.com/tomdracz).
|
16
|
+
- Add `dev_server.inline_css: bool` config option to allow for opting out of style-loader and into mini-extract-css-plugin for CSS HMR in development. [PR 69](https://github.com/shakacode/shakapacker/pull/69) by [cheald](https://github.com/cheald).
|
17
|
+
|
18
|
+
### Improved
|
19
|
+
- Increase default connect timeout for dev server connections, establishing connections more reliably for busy machines. [PR 74](https://github.com/shakacode/shakapacker/pull/74) by [stevecrozz](https://github.com/stevecrozz).
|
20
|
+
- Allow multiple invocations of stylesheet_pack_tag (eg for a regular stylesheet & a print stylesheet). [PR 82](https://github.com/shakacode/shakapacker/pull/82) by [jdelStrother](https://github.com/jdelStrother).
|
21
|
+
- Tweak swc config for parity with Babel. [PR 79](https://github.com/shakacode/shakapacker/pull/79) by [dleavitt](https://github.com/dleavitt).
|
22
|
+
|
10
23
|
## [v6.1.1] - February 6, 2022
|
11
24
|
|
12
25
|
### Added
|
@@ -74,8 +87,9 @@ Changes since last non-beta release.
|
|
74
87
|
## v5.4.3 and prior changes from rails/webpacker
|
75
88
|
See [CHANGELOG.md in rails/webpacker (up to v5.4.3)](https://github.com/rails/webpacker/blob/master/CHANGELOG.md)
|
76
89
|
|
77
|
-
[Unreleased]: https://github.com/shakacode/shakapacker/compare/v6.
|
78
|
-
[v6.
|
90
|
+
[Unreleased]: https://github.com/shakacode/shakapacker/compare/v6.2.0...master
|
91
|
+
[v6.2.0]: https://github.com/shakacode/shakapacker/compare/v6.1.1...v6.2.0
|
92
|
+
[v6.1.1]: https://github.com/shakacode/shakapacker/compare/v6.1.0...v6.1.1
|
79
93
|
[v6.1.0]: https://github.com/shakacode/shakapacker/compare/v6.0.2...v6.1.0
|
80
94
|
[v6.0.2]: https://github.com/shakacode/shakapacker/compare/v6.0.1...v6.0.2
|
81
95
|
[v6.0.1]: https://github.com/shakacode/shakapacker/compare/v6.0.0...v6.0.1
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -2,8 +2,7 @@
|
|
2
2
|
|
3
3
|
_Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker). Internal naming for `shakapacker` will continue to use `webpacker` where possible for v6. ShakaCode stands behind long-term maintainence and development of this project for the Rails community._
|
4
4
|
|
5
|
-
|
6
|
-
* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.
|
5
|
+
* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.
|
7
6
|
|
8
7
|
[![Ruby specs](https://github.com/shakacode/shakapacker/workflows/Ruby%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)
|
9
8
|
[![Jest specs](https://github.com/shakacode/shakapacker/workflows/Jest%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)
|
@@ -18,13 +17,13 @@ Webpacker makes it easy to use the JavaScript pre-processor and bundler [Webpack
|
|
18
17
|
to manage application-like JavaScript in Rails. It can coexist with the asset pipeline,
|
19
18
|
leaving Webpack responsible solely for app-like JavaScript, or it can be used exclusively, making it also responsible for images, fonts, and CSS.
|
20
19
|
|
21
|
-
Check out 6.1.
|
20
|
+
Check out 6.1.1 for [SWC](https://swc.rs/) and [esbuild-loader](https://github.com/privatenumber/esbuild-loader) support! They are faster than Babel!
|
22
21
|
|
23
22
|
See a comparison of [webpacker with jsbundling-rails](https://github.com/rails/jsbundling-rails/blob/main/docs/comparison_with_webpacker.md).
|
24
23
|
|
25
|
-
Discussion
|
26
|
-
1. [
|
27
|
-
2. [
|
24
|
+
Discussion forum and Slack to discuss debugging and troubleshooting tips. Please open issues for bugs and feature requests:
|
25
|
+
1. [Discussions tab](https://github.com/shakacode/shakapacker/discussions)
|
26
|
+
2. [Slack discussion channel](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE)
|
28
27
|
|
29
28
|
---
|
30
29
|
|
@@ -78,12 +77,12 @@ Discussion forums to discuss debugging and troubleshooting tips. Please open iss
|
|
78
77
|
- Yarn
|
79
78
|
|
80
79
|
## Features
|
81
|
-
- Rails view helpers that fully support
|
80
|
+
- Rails view helpers that fully support Webpack output, including HMR and code splitting.
|
82
81
|
- Convenient but not required webpack configuration. The only requirement is that your webpack configuration create a manifest.
|
83
82
|
- HMR with the webpack-dev-server, such as for hot-reloading for React!
|
84
83
|
- Automatic code splitting using multiple entry points to optimize JavaScript downloads
|
85
|
-
- [Webpack v5](https://webpack.js.org/)
|
86
|
-
- ES6 with [babel](https://babeljs.io/)
|
84
|
+
- [Webpack v5+](https://webpack.js.org/)
|
85
|
+
- ES6 with [babel](https://babeljs.io/), [SWC](https://swc.rs/), or [Esbuild](https://github.com/privatenumber/esbuild-loader)
|
87
86
|
- Asset compression, source-maps, and minification
|
88
87
|
- CDN support
|
89
88
|
- Extensible and configurable. For example, all major dependencies are specified as peers, so you can upgrade easily.
|
@@ -107,11 +106,10 @@ rails new myapp --skip-javascript
|
|
107
106
|
|
108
107
|
_Note, Rails 6 installs the older v5 version of webpacker unless you specify `--skip-javascript`._
|
109
108
|
|
110
|
-
|
109
|
+
Add `shakapacker` gem to your `Gemfile`:
|
111
110
|
|
112
|
-
```
|
113
|
-
|
114
|
-
gem 'shakapacker', '~> 6.0'
|
111
|
+
```bash
|
112
|
+
bundle add shakapacker --strict
|
115
113
|
```
|
116
114
|
|
117
115
|
Then running the following to install Webpacker:
|
@@ -208,9 +206,18 @@ The result looks like this:
|
|
208
206
|
<%= stylesheet_pack_tag 'map' %>
|
209
207
|
```
|
210
208
|
|
209
|
+
However, you may use multiple calls to stylesheet_pack_tag if, say, you require multiple <style> tags for different output media:
|
210
|
+
|
211
|
+
``` erb
|
212
|
+
<%= stylesheet_pack_tag 'application', media: 'screen' %>
|
213
|
+
<%= stylesheet_pack_tag 'print', media: 'print' %>
|
214
|
+
```
|
215
|
+
|
216
|
+
If you need to setup the pack name args in partials, [see this discussion](https://github.com/shakacode/shakapacker/issues/39).
|
217
|
+
|
211
218
|
If you want to link a static asset for `<img />` tag, you can use the `asset_pack_path` helper:
|
212
219
|
```erb
|
213
|
-
<img src="<%= asset_pack_path '
|
220
|
+
<img src="<%= asset_pack_path 'static/logo.svg' %>" />
|
214
221
|
```
|
215
222
|
|
216
223
|
Or use the dedicated helper:
|
@@ -369,6 +376,13 @@ console.log(webpackConfig.source_path)
|
|
369
376
|
console.log(JSON.stringify(webpackConfig, undefined, 2))
|
370
377
|
```
|
371
378
|
|
379
|
+
You may want to modify rules in the default configuration. For instance, if you are using a custom svg loader, you may want to remove `.svg` from the default file loader rules. You can search and filter the default rules like so:
|
380
|
+
|
381
|
+
```js
|
382
|
+
const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
|
383
|
+
svgRule.test = svgRule.test.filter(t => !t.test('.svg'))
|
384
|
+
```
|
385
|
+
|
372
386
|
### Babel configuration
|
373
387
|
|
374
388
|
By default, you will find the Webpacker preset in your `package.json`. Note, you need to use the new NPM package name, `shakapacker`.
|
@@ -665,7 +679,9 @@ development:
|
|
665
679
|
port: 3035
|
666
680
|
```
|
667
681
|
|
668
|
-
If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
|
682
|
+
If you have `hmr` turned to true and `inline_css` is not false, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
|
683
|
+
|
684
|
+
If you want to have HMR and separate link tags, set `hmr: true` and `inline_css: false`. This will cause styles to be extracted and reloaded with the `mini-css-extract-plugin` loader. Note that in this scenario, you do not need to include style-loader in your project dependencies.
|
669
685
|
|
670
686
|
### Additional paths
|
671
687
|
|
@@ -29,7 +29,9 @@ yarn add --dev @pmmmwh/react-refresh-webpack-plugin react-refresh
|
|
29
29
|
module.exports = function (api) {
|
30
30
|
const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
|
31
31
|
const resultConfig = defaultConfigFunc(api)
|
32
|
+
const isDevelopmentEnv = api.env('development')
|
32
33
|
const isProductionEnv = api.env('production')
|
34
|
+
const isTestEnv = api.env('test')
|
33
35
|
|
34
36
|
const changesOnDefault = {
|
35
37
|
presets: [
|
@@ -0,0 +1,48 @@
|
|
1
|
+
# CSS Delivery In Development
|
2
|
+
|
3
|
+
You have two options for serving CSS in development:
|
4
|
+
|
5
|
+
1. You can opt to serve CSS via style-loader (as was traditionally done in a Webpack setup), where CSS is written by Javascript served by Webpacker into a `<style>` tag, or
|
6
|
+
2. You can opt to serve CSS as a full CSS file via mini-css-extract-plugin, which uses a standard `<link>` tag to load a fully separate CSS file.
|
7
|
+
|
8
|
+
Both options support HMR. The default is style-loader. If you want to use mini-css-extract-plugin in development, set `inline_css: false` in the development dev_server section of your webpacker.yml:
|
9
|
+
|
10
|
+
```yml
|
11
|
+
development:
|
12
|
+
<<: *default
|
13
|
+
dev_server:
|
14
|
+
hmr: true
|
15
|
+
inline_css: false # Use mini-css-extract-plugin for CSS delivery
|
16
|
+
```
|
17
|
+
|
18
|
+
## Why would I pick style-loader?
|
19
|
+
|
20
|
+
style-loader is how you are probably are used to serving CSS in development with HMR in Webpack.
|
21
|
+
|
22
|
+
### benefits
|
23
|
+
|
24
|
+
* No [Flash Of Unstyled Content (FOUC)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) on HMR refreshes
|
25
|
+
* Smaller/faster incremental updates.
|
26
|
+
|
27
|
+
### drawbacks
|
28
|
+
|
29
|
+
* Inflated JS deliverable size; requires JS execution before CSS is available
|
30
|
+
* FOUC on initial page load
|
31
|
+
* Adds an extra dependency
|
32
|
+
* Divergence in delivery mechanism from production
|
33
|
+
|
34
|
+
## Why would I pick mini-extract-css-plugin?
|
35
|
+
|
36
|
+
mini-css-extract-plugin's behavior is much more true to a production deployment's behavior, in that CSS is loaded via `link rel=stylsheet` tags, rather than injected by Javascript into `style` tags.
|
37
|
+
|
38
|
+
### benefits
|
39
|
+
|
40
|
+
* Required for production, so it's going to be in play anyhow. Using only it simplifies the config and eliminates the style-loader dependency.
|
41
|
+
* No FOUC on initial page loads
|
42
|
+
* CSS delivered via `<link>` tags matches the mechanism used in production (I have been guilty of omitting my `stylesheet_pack_tag` for my first deploy because CSS worked fine with just the `javascript_pack_tag` in development.)
|
43
|
+
|
44
|
+
### drawbacks
|
45
|
+
|
46
|
+
* Invokes a separate HTTP request, compared to style-loader
|
47
|
+
* Potential for FOUC on HMR refreshes
|
48
|
+
* More data transferred per refresh (full stylesheet reload, rather than just an incremental patch). Not likely to be noticed for local development, but still a technical difference. This may only be the case [when you're using local CSS modules](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/hmr/hotModuleReplacement.js#L267-L273).
|
@@ -24,7 +24,7 @@ To use esbuild as your transpiler today. You need to do two things:
|
|
24
24
|
1. Make sure you've installed `esbuild` and `esbuild-loader` packages.
|
25
25
|
|
26
26
|
```
|
27
|
-
yarn add
|
27
|
+
yarn add esbuild esbuild-loader
|
28
28
|
```
|
29
29
|
|
30
30
|
2. Add or change `webpacker_loader` value in your default `webpacker.yml` config to `esbuild`
|
data/docs/using_swc_loader.md
CHANGED
@@ -19,10 +19,10 @@ In order to use SWC as your compiler today. You need to do two things:
|
|
19
19
|
1. Make sure you've installed `@swc/core` and `swc-loader` packages.
|
20
20
|
|
21
21
|
```
|
22
|
-
yarn add
|
22
|
+
yarn add @swc/core swc-loader
|
23
23
|
```
|
24
24
|
|
25
|
-
2. Add or change `
|
25
|
+
2. Add or change `webpack_loader` value in your default `webpacker.yml` config to `swc`
|
26
26
|
The default configuration of babel is done by using `package.json` to use the file within the `shakapacker` package.
|
27
27
|
|
28
28
|
```yml
|
data/docs/v6_upgrade.md
CHANGED
@@ -10,16 +10,16 @@ Webpacker used to configure Webpack indirectly, which lead to a [complicated sec
|
|
10
10
|
|
11
11
|
While you have to configure integration with frameworks yourself, [`webpack-merge`](https://github.com/survivejs/webpack-merge) helps with this. See this example for [Vue](https://github.com/shakacode/shakapacker#other-frameworks) and scroll to the bottom for [more examples](#examples-of-v5-to-v6).
|
12
12
|
|
13
|
-
## webpacker v6.0.0.rc.6 to shakapacker v6.0.0
|
13
|
+
## webpacker v6.0.0.rc.6 to shakapacker v6.0.0
|
14
14
|
See an example migration here: [PR 27](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/pull/27).
|
15
|
-
|
15
|
+
|
16
16
|
### Update Steps to v6.0.0 from v6.0.0.rc.6
|
17
17
|
_If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
|
18
18
|
|
19
19
|
1. Change the gem name from `webpacker` to `shakapacker` and the NPM package from `@rails/webpacker` to `shakapacker`.
|
20
20
|
1. Install the peer dependencies. Run `yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server`
|
21
21
|
1. Update any scripts that called `bin/webpack` or `bin/webpack-dev-server` to `bin/webpacker` or `bin/webpacker-dev-server`
|
22
|
-
1. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. If you want to use the prior style of having a separate file for each NODE_ENV, you can use this shim for `config/webpack/webpack.config.js
|
22
|
+
1. Update your webpack config for a single config file, `config/webpack/webpack.config.js`. If you want to use the prior style of having a separate file for each NODE_ENV, you can use this shim for `config/webpack/webpack.config.js`. WARNING, previously, if you did not set `NODE_ENV`, `NODE_ENV` defaulted to `development`. Thus, you might expect `config/webpack/development.js` to run, but you'll instead be using the `config/webpack/RAILS_ENV.js`
|
23
23
|
```js
|
24
24
|
const { env, webpackConfig } = require('shakapacker')
|
25
25
|
const { existsSync } = require('fs')
|
@@ -30,11 +30,12 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
|
|
30
30
|
if (existsSync(path)) {
|
31
31
|
console.log(`Loading ENV specific webpack configuration file ${path}`)
|
32
32
|
return require(path)
|
33
|
-
} else {
|
34
|
-
|
33
|
+
} else {
|
34
|
+
// Probably an error if the file for the NODE_ENV does not exist
|
35
|
+
throw new Error(`Got Error with NODE_ENV = ${env.nodeEnv}`);
|
35
36
|
}
|
36
37
|
}
|
37
|
-
|
38
|
+
|
38
39
|
module.exports = envSpecificConfig()
|
39
40
|
```
|
40
41
|
1. Update `babel.config.js` if you need JSX support. See [Customizing Babel Config](./customizing_babel_config.md)
|
@@ -43,26 +44,26 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
|
|
43
44
|
1. Ensure you have a clean working git branch. You will be overwriting all your files and reverting the changes that you don't want.
|
44
45
|
|
45
46
|
1. Consider changing from the v5 default for `source_entry_path` in `webpacker.yml`.
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
47
|
+
```yml
|
48
|
+
source_path: app/javascript
|
49
|
+
source_entry_path: packs
|
50
|
+
```
|
51
|
+
consider changing to the v6 default:
|
52
|
+
```yml
|
53
|
+
source_path: app/javascript
|
54
|
+
source_entry_path: /
|
55
|
+
```
|
56
|
+
Then consider moving your `app/javascript/packs/*` (including `application.js`) to `app/javascript/` and updating the configuration file.
|
57
|
+
|
58
|
+
Note, moving your files is optional, as you can stil keep your entries in a separate directory, called something like `packs`, or `entries`. This directory is defined within the source_path.
|
58
59
|
|
59
60
|
1. **Ensure no nested directories in your `source_entry_path`.** Check if you had any entry point files in child directories of your `source_entry_path`. Files for entry points in child directories are not supported by shakacode/shakapacker v6. Move those files to the top level, adjusting any imports in those files.
|
60
61
|
|
61
|
-
|
62
|
+
The new v6 configuration does not allow nesting, so as to allow placing the entry points at in the root directory of JavaScript. You can find this change [here](https://github.com/rails/webpacker/commit/5de0fbc1e16d3db0c93202fb39f5b4d80582c682#diff-7af8667a3e36201db57c02b68dd8651883d7bfc00dc9653661be11cd31feeccdL19).
|
62
63
|
|
63
64
|
1. Upgrade the Webpacker Ruby gem and the NPM package
|
64
65
|
|
65
|
-
Note: [Check the gem page to verify the latest version](https://rubygems.org/gems/shakapacker), and make sure to install identical version numbers of `shakapacker` gem and package. (Gems use a
|
66
|
+
Note: [Check the gem page to verify the latest version](https://rubygems.org/gems/shakapacker), and make sure to install identical version numbers of `shakapacker` gem and package. (Gems use a hyphen and packages use a dot between the main version number and the beta version.)
|
66
67
|
|
67
68
|
Example going to a specific version:
|
68
69
|
|
@@ -79,35 +80,15 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
|
|
79
80
|
yarn add shakapacker@6.0.0-rc.13 --exact
|
80
81
|
```
|
81
82
|
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
Overwrite all files and check what changed.
|
87
|
-
|
88
|
-
Note, the webpacker:install will install the peer dependencies:
|
89
|
-
```bash
|
90
|
-
yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
|
91
|
-
```
|
92
|
-
|
93
|
-
1. There is now a single default configuration file of `config/webpack/webpack.config.js`. Previously, the config file was set
|
94
|
-
to `config/webpack/#{NODE_ENV}.js`. In the `config/webpack/` directory, you can either refactor your code in `test.js`, `development.js`, and `production.js` to a single file, `webpack.config.js` or you can replace the contents of `config/webpack/config.webpack.js` to conditionally load the old file based on the NODE_ENV with this snippet:
|
95
|
-
```js
|
96
|
-
const { env, webpackConfig } = require('shakapacker')
|
97
|
-
const { existsSync } = require('fs')
|
98
|
-
const { resolve } = require('path')
|
83
|
+
```bash
|
84
|
+
bundle exec rails webpacker:install
|
85
|
+
```
|
99
86
|
|
100
|
-
|
101
|
-
const path = resolve(__dirname, `${env.nodeEnv}.js`)
|
102
|
-
if (existsSync(path)) {
|
103
|
-
console.log(`Loading ENV specific webpack configuration file ${path}`)
|
104
|
-
return require(path)
|
105
|
-
} else {
|
106
|
-
return webpackConfig
|
107
|
-
}
|
108
|
-
}
|
87
|
+
Overwrite all files and check what changed.
|
109
88
|
|
110
|
-
|
89
|
+
Note, the webpacker:install will install the peer dependencies:
|
90
|
+
```bash
|
91
|
+
yarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader compression-webpack-plugin terser-webpack-plugin webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server
|
111
92
|
```
|
112
93
|
|
113
94
|
1. Review the new default's changes to `webpacker.yml`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
|
@@ -135,51 +116,66 @@ _If you're on webpacker v5, follow below steps to get to v6.0.0.rc.6 first._
|
|
135
116
|
|
136
117
|
1. If you are using any integrations like `css`, `postcss`, `React` or `TypeScript`. Please see https://github.com/shakacode/shakapacker#integrations section on how they work in v6.
|
137
118
|
|
138
|
-
1.
|
119
|
+
1. `config/webpack/environment.js` was changed to `config/webpack/base.js` and exports a native webpack config so no need to call `toWebpackConfig`.
|
120
|
+
Use `merge` to make changes:
|
121
|
+
|
139
122
|
```js
|
140
|
-
// config/webpack/
|
141
|
-
const { webpackConfig, merge } = require('
|
142
|
-
const customConfig =
|
143
|
-
|
144
|
-
|
123
|
+
// config/webpack/base.js
|
124
|
+
const { webpackConfig, merge } = require('@rails/webpacker');
|
125
|
+
const customConfig = {
|
126
|
+
module: {
|
127
|
+
rules: [
|
128
|
+
{
|
129
|
+
test: require.resolve('jquery'),
|
130
|
+
loader: 'expose-loader',
|
131
|
+
options: {
|
132
|
+
exposes: ['$', 'jQuery']
|
133
|
+
}
|
134
|
+
}
|
135
|
+
]
|
136
|
+
}
|
137
|
+
};
|
138
|
+
|
139
|
+
module.exports = merge(webpackConfig, customConfig);
|
145
140
|
```
|
146
|
-
|
141
|
+
|
147
142
|
1. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
|
148
143
|
|
149
144
|
1. Remove `babel.config.js` if you never changed it. Configure your `package.json` to use the default:
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
145
|
+
```json
|
146
|
+
"babel": {
|
147
|
+
"presets": [
|
148
|
+
"./node_modules/@rails/webpacker/package/babel/preset.js"
|
149
|
+
]
|
150
|
+
}
|
151
|
+
```
|
152
|
+
See customization example the [Customizing Babel Config](./docs/customizing_babel_config.md) for React configuration.
|
158
153
|
|
159
154
|
1. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/shakacode/shakapacker/blob/master/README.md#webpack-configuration)
|
160
155
|
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
1. In `webpacker.yml`, check if you had `watched_paths`. That is
|
156
|
+
```js
|
157
|
+
{
|
158
|
+
resolve: {
|
159
|
+
extensions: ['.ts', '.tsx', '.vue', '.css']
|
160
|
+
}
|
161
|
+
}
|
162
|
+
```
|
163
|
+
1. In `webpacker.yml`, check if you had `watched_paths`. That is now `additional_paths`.
|
169
164
|
|
170
165
|
1. Some dependencies were removed in [PR 3056](https://github.com/rails/webpacker/pull/3056). If you see the error: `Error: Cannot find module 'babel-plugin-macros'`, or similar, then you need to `yarn add <dependency>` where <dependency> might include: `babel-plugin-macros`, `case-sensitive-paths-webpack-plugin`, `core-js`, `regenerator-runtime`. Or you might want to remove your dependency on those.
|
171
166
|
|
172
167
|
1. Review the new default's changes to `webpacker.yml` and `config/webpack`. Consider each suggested change carefully, especially the change to have your `source_entry_path` be at the top level of your `source_path`.
|
173
168
|
|
174
|
-
1. Make sure that you can run `bin/
|
169
|
+
1. Make sure that you can run `bin/webpack` without errors.
|
175
170
|
|
176
171
|
1. Try running `RAILS_ENV=production bin/rails assets:precompile`. If all goes well, don't forget to clean the generated assets with `bin/rails assets:clobber`.
|
177
172
|
|
178
173
|
1. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.
|
179
174
|
|
180
|
-
1.
|
175
|
+
1. In `bin/webpack` and `bin/webpack-dev-server`, The default NODE_ENV, if not set, will be the RAILS_ENV. Previously, NODE_ENV would default to development if not set. Thus, the old bin stubs would use the webpack config corresponding to `config/webpack/development.js`. After the change, if `RAILS_ENV` is `test`, then `NODE_ENV` is `test`. The final 6.0 release changes to using a single `webpack.config.js`.
|
176
|
+
|
177
|
+
1. Now, follow the steps above to get to shakapacker v6 from webpacker v6.0.0.rc.6
|
181
178
|
|
182
|
-
1. Now, follow the steps above to get to shakapacker v6 from webpacker v6.0.0.rc.6[
|
183
179
|
|
184
180
|
## Examples of v5 to v6
|
185
181
|
|
@@ -8,6 +8,9 @@ default: &default
|
|
8
8
|
cache_path: tmp/webpacker
|
9
9
|
webpack_compile_output: true
|
10
10
|
|
11
|
+
# Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
|
12
|
+
# manifest_path: public/packs/manifest.json
|
13
|
+
|
11
14
|
# Additional paths webpack should look up modules
|
12
15
|
# ['app/assets', 'engine/foo/app/assets']
|
13
16
|
additional_paths: []
|
@@ -18,6 +21,9 @@ default: &default
|
|
18
21
|
# Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
|
19
22
|
webpack_loader: 'babel'
|
20
23
|
|
24
|
+
# Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
|
25
|
+
ensure_consistent_versioning: false
|
26
|
+
|
21
27
|
development:
|
22
28
|
<<: *default
|
23
29
|
compile: true
|
@@ -29,6 +35,14 @@ development:
|
|
29
35
|
port: 3035
|
30
36
|
# Hot Module Replacement updates modules while the application is running without a full reload
|
31
37
|
hmr: false
|
38
|
+
# If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
|
39
|
+
# that you add style-loader to your project dependencies.
|
40
|
+
#
|
41
|
+
# If you want to instead deliver CSS via <link> with the mini-extract-css-plugin, set inline_css to false.
|
42
|
+
# In that case, style-loader is not needed as a dependency.
|
43
|
+
#
|
44
|
+
# mini-extract-css-plugin is a required dependency in both cases.
|
45
|
+
inline_css: true
|
32
46
|
# Defaults to the inverse of hmr. Uncomment to manually set this.
|
33
47
|
# live_reload: true
|
34
48
|
client:
|
data/lib/install/template.rb
CHANGED
@@ -58,10 +58,10 @@ results = []
|
|
58
58
|
Dir.chdir(Rails.root) do
|
59
59
|
if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
|
60
60
|
say "Installing shakapacker@#{Webpacker::VERSION}"
|
61
|
-
results << run("yarn add shakapacker@#{Webpacker::VERSION}")
|
61
|
+
results << run("yarn add shakapacker@#{Webpacker::VERSION} --exact")
|
62
62
|
else
|
63
63
|
say "Installing shakapacker@next"
|
64
|
-
results << run("yarn add shakapacker@next")
|
64
|
+
results << run("yarn add shakapacker@next --exact")
|
65
65
|
end
|
66
66
|
|
67
67
|
package_json = File.read("#{__dir__}/../../package.json")
|
data/lib/webpacker/commands.rb
CHANGED
@@ -16,7 +16,7 @@ class Webpacker::Commands
|
|
16
16
|
# age=600.
|
17
17
|
#
|
18
18
|
def clean(count = 2, age = 3600)
|
19
|
-
if config.public_output_path.exist? && config.
|
19
|
+
if config.public_output_path.exist? && config.manifest_path.exist?
|
20
20
|
packs
|
21
21
|
.map do |paths|
|
22
22
|
paths.map { |path| [Time.now - File.mtime(path), path] }
|
@@ -57,7 +57,7 @@ class Webpacker::Commands
|
|
57
57
|
private
|
58
58
|
def packs
|
59
59
|
all_files = Dir.glob("#{config.public_output_path}/**/*")
|
60
|
-
manifest_config = Dir.glob("#{config.
|
60
|
+
manifest_config = Dir.glob("#{config.manifest_path}*")
|
61
61
|
|
62
62
|
packs = all_files - manifest_config - current_version
|
63
63
|
packs.reject { |file| File.directory?(file) }.group_by do |path|
|
data/lib/webpacker/compiler.rb
CHANGED
@@ -47,7 +47,7 @@ class Webpacker::Compiler
|
|
47
47
|
attr_reader :webpacker
|
48
48
|
|
49
49
|
def last_compilation_digest
|
50
|
-
compilation_digest_path.read if compilation_digest_path.exist? && config.
|
50
|
+
compilation_digest_path.read if compilation_digest_path.exist? && config.manifest_path.exist?
|
51
51
|
rescue Errno::ENOENT, Errno::ENOTDIR
|
52
52
|
end
|
53
53
|
|
@@ -23,6 +23,10 @@ class Webpacker::Configuration
|
|
23
23
|
fetch(:compile)
|
24
24
|
end
|
25
25
|
|
26
|
+
def ensure_consistent_versioning?
|
27
|
+
fetch(:ensure_consistent_versioning)
|
28
|
+
end
|
29
|
+
|
26
30
|
def source_path
|
27
31
|
root_path.join(fetch(:source_path))
|
28
32
|
end
|
@@ -35,6 +39,14 @@ class Webpacker::Configuration
|
|
35
39
|
source_path.join(fetch(:source_entry_path))
|
36
40
|
end
|
37
41
|
|
42
|
+
def manifest_path
|
43
|
+
if data.has_key?(:manifest_path)
|
44
|
+
root_path.join(fetch(:manifest_path))
|
45
|
+
else
|
46
|
+
public_output_path.join("manifest.json")
|
47
|
+
end
|
48
|
+
end
|
49
|
+
|
38
50
|
def public_path
|
39
51
|
root_path.join(fetch(:public_root_path))
|
40
52
|
end
|
@@ -43,10 +55,6 @@ class Webpacker::Configuration
|
|
43
55
|
public_path.join(fetch(:public_output_path))
|
44
56
|
end
|
45
57
|
|
46
|
-
def public_manifest_path
|
47
|
-
public_output_path.join("manifest.json")
|
48
|
-
end
|
49
|
-
|
50
58
|
def cache_manifest?
|
51
59
|
fetch(:cache_manifest)
|
52
60
|
end
|
data/lib/webpacker/dev_server.rb
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
class Webpacker::DevServer
|
2
2
|
DEFAULT_ENV_PREFIX = "WEBPACKER_DEV_SERVER".freeze
|
3
3
|
|
4
|
-
# Configure dev server connection timeout (in seconds), default: 0.
|
4
|
+
# Configure dev server connection timeout (in seconds), default: 0.1
|
5
5
|
# Webpacker.dev_server.connect_timeout = 1
|
6
|
-
cattr_accessor(:connect_timeout) { 0.
|
6
|
+
cattr_accessor(:connect_timeout) { 0.1 }
|
7
7
|
|
8
8
|
attr_reader :config
|
9
9
|
|
@@ -55,6 +55,15 @@ class Webpacker::DevServer
|
|
55
55
|
fetch(:hmr)
|
56
56
|
end
|
57
57
|
|
58
|
+
def inline_css?
|
59
|
+
case fetch(:inline_css)
|
60
|
+
when false, "false"
|
61
|
+
false
|
62
|
+
else
|
63
|
+
true
|
64
|
+
end
|
65
|
+
end
|
66
|
+
|
58
67
|
def env_prefix
|
59
68
|
config.dev_server.fetch(:env_prefix, DEFAULT_ENV_PREFIX)
|
60
69
|
end
|
data/lib/webpacker/helper.rb
CHANGED
@@ -148,13 +148,6 @@ module Webpacker::Helper
|
|
148
148
|
# <%= stylesheet_pack_tag 'calendar' %>
|
149
149
|
# <%= stylesheet_pack_tag 'map' %>
|
150
150
|
def stylesheet_pack_tag(*names, **options)
|
151
|
-
if @stylesheet_pack_tag_loaded
|
152
|
-
raise "To prevent duplicated chunks on the page, you should call stylesheet_pack_tag only once on the page. " \
|
153
|
-
"Please refer to https://github.com/shakacode/shakapacker/blob/master/README.md#usage for the usage guide"
|
154
|
-
end
|
155
|
-
|
156
|
-
@stylesheet_pack_tag_loaded = true
|
157
|
-
|
158
151
|
return "" if Webpacker.inlining_css?
|
159
152
|
|
160
153
|
stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
|