-
-
Notifications
You must be signed in to change notification settings - Fork 631
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
React on Rails v9 on rails/webpacker v3 (#908)
* See CHANGELOG.md for summary of changes * Change webpack-bundle to hello-world-bundle See https://github.com/shakacode/react-on-rails-v9-rc-generator/pulls for examples of new generator output. * Remove gen examples optimizations for spec Older optimizations were for times npm was super slow. 1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client` 2. Renamed * config.npm_build_test_command ==> config.build_test_command * config.build_production_command ==> config.build_production_command - Update the gemfile. Switch over to using the webpacker gem. ```rb gem "webpacker" ``` - Update for the renaming in the `WebpackConfigLoader` in your webpack configuration. You will need to rename the following object properties: - webpackOutputPath ==> output.path - webpackPublicOutputDir ==> output.publicPath - hotReloadingUrl ==> output.publicPathWithHost - hotReloadingHostname ==> settings.dev_server.host - hotReloadingPort ==> settings.dev_server.port - hmr ==> settings.dev_server.hmr - manifest ==> Remove this one. We use the default for Webpack of manifest.json - env ==> Use `const { env } = require('process');` - devBuild ==> Use `const devBuild = process.env.NODE_ENV !== 'production';` - Edit your Webpack.config files: - Change your Webpack output to be like: ``` const webpackConfigLoader = require('react-on-rails/webpackConfigLoader'); const configPath = resolve('..', 'config'); const { output, settings } = webpackConfigLoader(configPath); const hmr = settings.dev_server.hmr; const devBuild = process.env.NODE_ENV !== 'production'; output: { filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js', chunkFilename: '[name]-[chunkhash].chunk.js', publicPath: output.publicPath, path: output.path, }, ``` - Change your ManifestPlugin definition to something like the following ``` new ManifestPlugin({ publicPath: output.publicPath, writeToFileEmit: true }), ``` - Find your `webpacker_lite.yml` and rename it to `webpacker.yml` - Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml - If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section. - Alternately, if you are updating from webpacker_lite, you can manually change these: - Add a default setting ``` cache_manifest: false ``` - For production, set: ``` cache_manifest: true ``` - Add a section like this under your development env: ``` dev_server: host: localhost port: 3035 hmr: false ``` Set hmr to your preference. - See the example `spec/dummy/config/webpacker.yml`. - Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key. - Rename `webpack_public_output_dir` to `public_output_path`. - Edit your Procfile.dev - Remove the env value WEBPACKER_DEV_SERVER as it's not used - For hot loading: - Set the `hmr` key in your `webpacker.yml` to `true`.
- Loading branch information
Showing
102 changed files
with
1,062 additions
and
1,483 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # Asset Pipeline | ||
|
|
||
| The plumbing of webpack produced assets through the asset pipeline is deprecated as of v9.0. | ||
|
|
||
| The information in this document is here for those that have not yet upgraded. | ||
|
|
||
|
|
||
|
|
||
|
|
||
| This option still works for your `/config/initializers/react_on_rails.rb` if you are still using the | ||
| asset pipeline. | ||
| ``` | ||
| ################################################################################ | ||
| # MISCELLANEOUS OPTIONS | ||
| ################################################################################ | ||
| # If you want to use webpack for CSS and images, and still use the asset pipeline, | ||
| # see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md | ||
| # And you will use a setting like this. | ||
| config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/ | ||
| ``` |
Oops, something went wrong.