@rails/webpacker - npm Package Compare versions

Comparing version 6.0.0-beta.4 to 6.0.0-beta.5

package.json

 {
   "name": "@rails/webpacker",
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.5",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
@@ -5,0 +5,0 @@ "main": "package/index.js",

package/utils/helpers.js

@@ -19,3 +19,3 @@ const isArray = (value) => Array.isArray(value)
 
-const moduleExists = (packageName) => {
+const resolvedPath = (packageName) => {
   try {
@@ -31,4 +31,6 @@ return require.resolve(packageName)
 
+const moduleExists = (packageName) => (!!resolvedPath(packageName))
+
 const canProcess = (rule, fn) => {
-  const modulePath = moduleExists(rule)
+  const modulePath = resolvedPath(rule)
 
@@ -35,0 +37,0 @@ if (modulePath) {

README.md

@@ -62,3 +62,3 @@ # Webpacker
 
-  ### Optional support\*
+### Optional support
 
@@ -112,3 +112,4 @@ _requires extra packages to be installed_
 ```bash
-yarn install
+# default for `yarn` is to install
+yarn
 ```
@@ -134,6 +135,6 @@
 
-You can then link the JavaScript pack in Rails views using the `javascript_packs_with_chunks_tag` helper. If you have styles imported in your pack file, you can link them by using `stylesheet_packs_with_chunks_tag`:
+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`:
 
 ```erb
-<%= javascript_packs_with_chunks_tag 'application' %>
+<%= javascript_pack_tag 'application' %>
 <%= stylesheet_packs_with_chunks_tag 'application' %>
@@ -171,4 +172,10 @@ ```
 
+Note, if you are using server-side rendering of JavaScript with dynamic code-spliting, 
+as is often done with extensions to Webpacker, like [React on Rails](https://github.com/shakacode/react_on_rails)
+your JavaScript should create the link prefetch HTML tags that you will use, so you won't
+need to use to `asset_pack_path` in those circumstances.
+
 **Note:** In order for your styles or static assets files to be available in your view,
-you would need to link them in your `pack` or entry file.
+you would need to link them in your "pack" or entry file. Otherwise, Webpack won't know
+to package up those files.
 
@@ -185,8 +192,17 @@ ### Development
 This means that you don't have to run any separate processes. Compilation errors are logged
-to the standard Rails log.
+to the standard Rails log. However, this auto-compilation happens when a web request
+is made that requires an updated webpack build, not when files change. Thus, that can
+be painfully slow for front-end development in this default way. Instead, you should either
+run the `bin/webpack --watch` or run `./bin/webpack-dev-server`
 
-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`. Windows users will need to run these commands
-in a terminal separate from `bundle exec rails s`. This process will watch for changes
-in the `app/packs/entrypoints/*.js` files and automatically reload the browser to match.
+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`.
+Windows users will need to run these commands in a terminal separate from `bundle exec rails s`. 
+This process will watch for changes in the `app/packs/entrypoints/*.js` files and automatically
+reload the browser to match. This feature is also known as
+[Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/).
 
+HMR is only the first step to running "Fast Refresh" with React. For more information
+on how to configure rails/webpacker for Fast Refresh with React, see article
+[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).
+
 ```bash
@@ -203,5 +219,6 @@ # webpack dev server
 
-Once you start this development server, Webpacker will automatically start proxying all
-webpack asset requests to this server. When you stop the server, it'll revert back to
-on-demand compilation.
+Once you start this webpack development server, Webpacker will automatically start proxying all
+webpack asset requests to this server. When you stop this server, Rails will detect
+that it's not running and Rails will revert back to on-demand compilation _if_ you have
+the `compile` option set to true in your `config/webpacker.yml`
 
@@ -286,2 +303,5 @@ You can use environment variables as options supported by
 console.log(webpackConfig.source_path)
+
+// Or to print out your whole webpack configuration
+console.log(JSON.stringify(webpackConfig, undefined, 2))
 ```
@@ -293,3 +313,3 @@
 compilation. To enable support for CoffeeScript or TypeScript install
-relevant packages,
+relevant packages:
 
@@ -334,3 +354,3 @@ #### CoffeeScript
 
-To enable CSS support in your application, add following packages,
+To enable CSS support in your application, add following packages:
 
@@ -341,3 +361,3 @@ ```bash
 
-optionally, add css extension to webpack config for easy resolution
+optionally, add the css extension to webpack config for easy resolution.
 
@@ -412,2 +432,6 @@ ```js
 
+For more information on React props hydration and Server-Side Rendering (SSR), see the article
+[Rails/Webpacker React Integration Options](https://github.com/shakacode/react_on_rails/blob/master/docs/rails-webpacker-react-integration-options.md) 
+in the [ShakaCode/react_on_rails](https://github.com/shakacode/react_on_rails) repo.
+
 #### Other frameworks
@@ -487,7 +511,7 @@
 ```bash
-# Compiles in development mode unless NODE_ENV is specified
+# Compiles in development mode unless NODE_ENV is specified, per the binstub source
 ./bin/webpack
 ./bin/webpack-dev-server
 
-# compiles in production mode by default unless NODE_ENV is specified
+# Compiles in production mode by default unless NODE_ENV is specified, per `lib/tasks/webpacker/compile.rake`
 bundle exec rails assets:precompile
@@ -502,4 +526,8 @@ bundle exec rails webpacker:compile
 ```bash
+# check your Gemfile for version restrictions
 bundle update webpacker
+
+# overwrite your changes to the default install files and revert any unwanted changes from the install
 rails webpacker:install
+
 yarn upgrade @rails/webpacker --latest
@@ -512,2 +540,4 @@ yarn upgrade webpack-dev-server --latest
 
+Also, consult the [CHANGELOG](./CHANGELOG.md) for additional upgrade links.
+
 ## Paths
@@ -531,4 +561,3 @@
 # config/webpacker.yml
-source_path: frontend
-source_entry_path: packs
+source_path: frontend # packs are in frontend/packs
 public_output_path: assets/packs # outputs to => public/assets/packs
@@ -547,3 +576,5 @@ ```
 
-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.
+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.
 
@@ -559,3 +590,3 @@ ### Additional paths
 ```yml
-additional_paths: ['app/assets/**/*', 'vendor/assets/**/*.css', 'Gemfile']
+additional_paths: ['app/assets', 'vendor/assets']
 ```
@@ -581,2 +612,6 @@
 
+## Troubleshooting
+
+See the doc page for [Troubleshooting](./docs/troubleshooting.md).
+
 ## Contributing
@@ -583,0 +618,0 @@

No alert changes

Improved metrics

Total package byte prevSize

86910

increased by2.55%

Lines of code

850

increased by0.12%

Number of lines in readme file

608

increased by6.11%

No dependency changes