Skip to content

Rename bin/webpack[-dev-server] to bin/webpacker[-dev-server] #3252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ environment.loaders.append('nodeModules', nodeModules)
- Update static files path to from `media/` to `static/`.

### Breaking changes
- Renamed `/bin/webpack` to `/bin/webpacker` and `/bin/webpack-dev-server` to `bin/webpacker-dev-server` to avoid confusion with underlying webpack executables.
- Removed integration installers
- Splitchunks enabled by default
- CSS extraction enabled by default, except when devServer is configured and running
Expand Down
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,44 +206,44 @@ Note, if you are using server-side rendering of JavaScript with dynamic code-spl

### Development

Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`. Both are thin wrappers around the standard `webpack.js` and `webpack-dev-server.js` executables to ensure that the right configuration files and environmental variables are loaded based on your environment.
Webpacker ships with two binstubs: `./bin/webpacker` and `./bin/webpacker-dev-server`. Both are thin wrappers around the standard `webpack.js` and `webpack-dev-server.js` executables to ensure that the right configuration files and environmental variables are loaded based on your environment.

In development, Webpacker compiles on demand rather than upfront by default. This happens when you refer to any of the pack assets using the Webpacker helper methods. This means that you don't have to run any separate processes. Compilation errors are logged 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`
In development, Webpacker compiles on demand rather than upfront by default. This happens when you refer to any of the pack assets using the Webpacker helper methods. This means that you don't have to run any separate processes. Compilation errors are logged 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/webpacker --watch` or run `./bin/webpacker-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 relevant files, defined by `webpacker.yml` configuration settings for `source_path`, `source_entry_path`, and `additional_paths`, and it will then automatically reload the browser to match. This feature is also known as [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/).
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/webpacker-dev-server` or `ruby ./bin/webpacker-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 relevant files, defined by `webpacker.yml` configuration settings for `source_path`, `source_entry_path`, and `additional_paths`, and it will then automatically reload the browser to match. This feature is also known as [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/).

```bash
# webpack dev server
./bin/webpack-dev-server
./bin/webpacker-dev-server

# watcher
./bin/webpack --watch --progress
./bin/webpacker --watch --progress

# standalone build
./bin/webpack --progress
./bin/webpacker --progress

# Help
./bin/webpack help
./bin/webpacker help

# Version
./bin/webpack version
./bin/webpacker version

# Info
./bin/webpack info
./bin/webpacker info
```

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`

You can use environment variables as options supported by [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) in the form `WEBPACKER_DEV_SERVER_<OPTION>`. Please note that these environmental variables will always take precedence over the ones already set in the configuration file, and that the _same_ environmental variables must be available to the `rails server` process.

```bash
WEBPACKER_DEV_SERVER_HOST=example.com WEBPACKER_DEV_SERVER_INLINE=true WEBPACKER_DEV_SERVER_HOT=false ./bin/webpack-dev-server
WEBPACKER_DEV_SERVER_HOST=example.com WEBPACKER_DEV_SERVER_INLINE=true WEBPACKER_DEV_SERVER_HOT=false ./bin/webpacker-dev-server
```

By default, the webpack dev server listens on `localhost` in development for security purposes. However, if you want your app to be available over local LAN IP or a VM instance like vagrant, you can set the `host` when running `./bin/webpack-dev-server` binstub:
By default, the webpack dev server listens on `localhost` in development for security purposes. However, if you want your app to be available over local LAN IP or a VM instance like vagrant, you can set the `host` when running `./bin/webpacker-dev-server` binstub:

```bash
WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-server
WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpacker-dev-server
```

**Note:** You need to allow webpack-dev-server host as an allowed origin for `connect-src` if you are running your application in a restrict CSP environment (like Rails 5.2+). This can be done in Rails 5.2+ in the CSP initializer `config/initializers/content_security_policy.rb` with a snippet like this:
Expand Down Expand Up @@ -536,8 +536,8 @@ Please note, binstubs compiles in development mode however rake tasks compiles i

```bash
# Compiles in development mode unless NODE_ENV is specified, per the binstub source
./bin/webpack
./bin/webpack-dev-server
./bin/webpacker
./bin/webpacker-dev-server

# Compiles in production mode by default unless NODE_ENV is specified, per `lib/tasks/webpacker/compile.rake`
bundle exec rails assets:precompile
Expand Down
10 changes: 5 additions & 5 deletions docs/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
1. Read the error message carefully. The error message will tell you the precise key value
that is not matching what Webpack expects.

2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
2. Put a `debugger` statement in your Webpack configuration and run `bin/webpacker --debug-webpacker`.
If you have a node debugger installed, you'll see the Chrome debugger for your webpack
config. For example, install the Chrome extension
[NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
set the option for the dev tools to open automatically. Or put `chrome://inspect` in the URL bar.
For more details on debugging, see the official
[Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)

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.
3. Any arguments that you add to bin/webpacker 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.

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`

Expand Down Expand Up @@ -50,7 +50,7 @@ Webpacker uses a `manifest.json` file to keep track of packs in all environments
however since this file is generated after packs are compiled by webpack. So,
if you load a view in browser whilst webpack is compiling you will get this error.
Therefore, make sure webpack
(i.e `./bin/webpack-dev-server`) is running and has
(i.e `./bin/webpacker-dev-server`) is running and has
completed the compilation successfully before loading a view.


Expand Down Expand Up @@ -79,7 +79,7 @@ bundle config --delete bin
## Running webpack on Windows

If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
for the scripts generated in `bin/webpack` and `bin/webpack-dev-server`. Instead you'll want to run the scripts
for the scripts generated in `bin/webpacker` and `bin/webpacker-dev-server`. Instead you'll want to run the scripts
manually with Ruby:

```
Expand All @@ -89,7 +89,7 @@ C:\path>ruby bin\webpack-dev-server

## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.

If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
If you receive this error when running `$ ./bin/webpacker-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.

## Running Elm on Continuous Integration (CI) services such as CircleCI, CodeShip, Travis CI

Expand Down
4 changes: 3 additions & 1 deletion docs/v6_upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,14 +103,16 @@ Example going to a specific version:

16. 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`.

17. Make sure that you can run `bin/webpack` without errors.
17. Make sure that you can run `bin/webpacker` without errors.

18. 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`.

19. Run `yarn add webpack-dev-server` if those are not already in your dev dependencies. Make sure you're using v4+.

20. Try your app!

21. Update any scripts that called `/bin/webpack` or `bin/webpack-dev-server` to `/bin/webpacker` or `bin/webpacker-dev-server`

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be the 20th step, the last step should always be Try your app! 😀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've got some other PRs with changes here, so I'll clean up all at once!

Copy link

@frullah frullah Jan 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
21. Update any scripts that called `/bin/webpack` or `bin/webpack-dev-server` to `/bin/webpacker` or `bin/webpacker-dev-server`
21. Update any scripts that called `bin/webpack` to `bin/webpacker` and `bin/webpack-dev-server` to `bin/webpacker-dev-server`

i think it can reduce confusion


## Examples of v5 to v6

1. [React on Rails Project with HMR and SSR](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/compare/webpacker-5.x...master)
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion lib/install/config/webpacker.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
# Note: You must restart bin/webpacker-dev-server for changes to take effect

default: &default
source_path: app/javascript
Expand Down
2 changes: 1 addition & 1 deletion lib/tasks/webpacker.rake
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ tasks = {
"webpacker:clobber" => "Removes the webpack compiled output directory",
"webpacker:check_node" => "Verifies if Node.js is installed",
"webpacker:check_yarn" => "Verifies if Yarn is installed",
"webpacker:check_binstubs" => "Verifies that bin/webpack is present",
"webpacker:check_binstubs" => "Verifies that bin/webpacker is present",
"webpacker:binstubs" => "Installs Webpacker binstubs in this application",
"webpacker:verify_install" => "Verifies if Webpacker is installed",
"webpacker:yarn_install" => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
Expand Down
6 changes: 3 additions & 3 deletions lib/tasks/webpacker/check_binstubs.rake
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
namespace :webpacker do
desc "Verifies that bin/webpack is present"
desc "Verifies that bin/webpacker is present"
task :check_binstubs do
unless File.exist?(Rails.root.join("bin/webpack"))
unless File.exist?(Rails.root.join("bin/webpacker"))
$stderr.puts "webpack binstub not found.\n"\
"Have you run rails webpacker:install ?\n"\
"Make sure the bin directory and bin/webpack are not included in .gitignore\n"\
"Make sure the bin directory and bin/webpacker are not included in .gitignore\n"\
"Exiting!"
exit!
end
Expand Down
4 changes: 2 additions & 2 deletions lib/tasks/webpacker/info.rake
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ namespace :webpacker do
$stdout.puts "\n"
$stdout.puts "@rails/webpacker: \n#{`npm list @rails/webpacker version`}"

$stdout.puts "Is bin/webpack present?: #{File.exist? 'bin/webpack'}"
$stdout.puts "Is bin/webpack-dev-server present?: #{File.exist? 'bin/webpack-dev-server'}"
$stdout.puts "Is bin/webpacker present?: #{File.exist? 'bin/webpacker'}"
$stdout.puts "Is bin/webpacker-dev-server present?: #{File.exist? 'bin/webpacker-dev-server'}"
$stdout.puts "Is bin/yarn present?: #{File.exist? 'bin/yarn'}"
end
end
Expand Down
4 changes: 2 additions & 2 deletions lib/webpacker/compiler.rb
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ def record_compilation_digest
end

def optionalRubyRunner
bin_webpack_path = config.root_path.join("bin/webpack")
bin_webpack_path = config.root_path.join("bin/webpacker")
first_line = File.readlines(bin_webpack_path).first.chomp
/ruby/.match?(first_line) ? RbConfig.ruby : ""
end
Expand All @@ -76,7 +76,7 @@ def run_webpack

stdout, stderr, status = Open3.capture3(
webpack_env,
"#{optionalRubyRunner} ./bin/webpack",
"#{optionalRubyRunner} ./bin/webpacker",
chdir: File.expand_path(config.root_path)
)

Expand Down
2 changes: 1 addition & 1 deletion lib/webpacker/manifest.rb
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ def missing_file_from_manifest_error(bundle_name)
1. You forgot to install node packages (try `yarn install`) or are running an incompatible version of Node
2. Your app has code with a non-standard extension (like a `.jsx` file) but the extension is not in the `extensions` config in `config/webpacker.yml`
3. You have set compile: false (see `config/webpacker.yml`) for this environment
(unless you are using the `webpack -w` or the webpack-dev-server, in which case maybe you aren't running the dev server in the background?)
(unless you are using the `bin/webpacker -w` or the `bin/webpacker-dev-server`, in which case maybe you aren't running the dev server in the background?)
4. webpack has not yet re-run to reflect updates.
5. You have misconfigured Webpacker's `config/webpacker.yml` file.
6. Your webpack configuration is not creating a manifest.
Expand Down
4 changes: 2 additions & 2 deletions test/engine_rake_tasks_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ def mounted_app_path

def webpack_binstub_paths
[
"#{mounted_app_path}/test/dummy/bin/webpack",
"#{mounted_app_path}/test/dummy/bin/webpack-dev-server",
"#{mounted_app_path}/test/dummy/bin/webpacker",
"#{mounted_app_path}/test/dummy/bin/webpacker-dev-server",
]
end

Expand Down
2 changes: 1 addition & 1 deletion test/mounted_app/test/dummy/config/webpacker.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
# Note: You must restart bin/webpacker-dev-server for changes to take effect

default: &default
source_path: app/packs
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion test/test_app/config/webpacker.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
# Note: You must restart bin/webpacker-dev-server for changes to take effect

default: &default
source_path: app/packs
Expand Down
2 changes: 1 addition & 1 deletion test/test_app/config/webpacker_other_location.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
# Note: You must restart bin/webpacker-dev-server for changes to take effect

default: &default
source_path: app/packs
Expand Down
2 changes: 1 addition & 1 deletion test/test_app/config/webpacker_public_root.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect
# Note: You must restart bin/webpacker-dev-server for changes to take effect

default: &default
public_root_path: ../public
Expand Down