webpackerとはwebpackをRailsから扱いやすくするためのラッパーです。
まずwebpackとは、複数のjsファイルをひとつのjsファイルにまとめたり、複数のcssファイルをひとつのcssファイルにしたりできます。機能ごとにファイルを分けて開発をすることによって、コードが整理されて開発効率、保守性が上がります。
Rails 6.0からは新規でRailsプロジェクトを作成するとデフォルトでWebpackerを利用する環境になります。パッケージマネージャーとしてYarnを採用しています。
Webpacker環境でJSを使った開発をする時は、Sprocketsで利用していたapp/assets/javascriptsではなく、app/javascript配下で作業します。そしてビルド結果をpublic/packs/jsへ出力します。開発時はページにアクセスしたときにビルドが行われるので、明示的にWebpackerによるビルドを行う必要はありません。
明示的にビルドするときのコマンドは$ rails webpacker:compileです。
$ bin/rails webpacker:compile
Compiling...
Compiled all packs in /Users/SAYO/workspace/perfect_rails/webpacker_sample/public/packs
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Hash: 58942ed5c00297e0c76e
Version: webpack 4.46.0
Time: 4604ms
Built at: 2022-01-06 20:30:13
Asset Size Chunks Chunk Names
js/application-b370c4d05b39ba610e8a.js 69.4 KiB 0 [emitted] [immutable] application
js/application-b370c4d05b39ba610e8a.js.br 15.3 KiB [emitted]
js/application-b370c4d05b39ba610e8a.js.gz 17.7 KiB [emitted]
js/application-b370c4d05b39ba610e8a.js.map 205 KiB 0 [emitted] [dev] application
js/application-b370c4d05b39ba610e8a.js.map.br 44 KiB [emitted]
js/application-b370c4d05b39ba610e8a.js.map.gz 51 KiB [emitted]
manifest.json 364 bytes [emitted]
manifest.json.br 127 bytes [emitted]
manifest.json.gz 142 bytes [emitted]
Entrypoint application = js/application-b370c4d05b39ba610e8a.js js/application-b370c4d05b39ba610e8a.js.map
[0] (webpack)/buildin/module.js 552 bytes {0} [built]
[1] ./app/javascript/packs/application.js 742 bytes {0} [built]
[5] ./app/javascript/channels/index.js 205 bytes {0} [built]
[6] ./app/javascript/channels sync _channel\\.js$ 160 bytes {0} [built]
+ 3 hidden modules
ビルドが完了すると、public/packsにファイルが出力されます。application-の後ろのランダムな文字列はブラウザによるキャッシュ対策で、ファイルの内容によって値が変わるフィンガープリント（自分が使用しているブラウザ）と呼ばれるものです。app/javascript/packs/application.jsのビルドした結果の成果物がapplication-から始まるファイルです。
わかりやすいようにhello.jsファイルを新たに作ってみます。作成後、ビルドも行いました。
$ touch app/javascript/packs/hello.js
alert("hello webpack")
$ bin/rails webpacker:compile
Compiling...
Compiled all packs in /Users/SAYO/workspace/perfect_rails/webpacker_sample/public/packs
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
Hash: 5d5c66bf5326d7274995
Version: webpack 4.46.0
Time: 2227ms
Built at: 2022-01-06 20:40:20
Asset Size Chunks Chunk Names
js/application-b370c4d05b39ba610e8a.js 69.4 KiB 0 [emitted] [immutable] application
js/application-b370c4d05b39ba610e8a.js.br 15.3 KiB [emitted]
js/application-b370c4d05b39ba610e8a.js.gz 17.7 KiB [emitted]
js/application-b370c4d05b39ba610e8a.js.map 205 KiB 0 [emitted] [dev] application
js/application-b370c4d05b39ba610e8a.js.map.br 44 KiB [emitted]
js/application-b370c4d05b39ba610e8a.js.map.gz 51 KiB [emitted]
js/hello-2fdc9fe0cca573bb67bf.js 1020 bytes 1 [emitted] [immutable] hello
js/hello-2fdc9fe0cca573bb67bf.js.br 467 bytes [emitted]
js/hello-2fdc9fe0cca573bb67bf.js.gz 521 bytes [emitted]
js/hello-2fdc9fe0cca573bb67bf.js.map 4.64 KiB 1 [emitted] [dev] hello
js/hello-2fdc9fe0cca573bb67bf.js.map.br 1.59 KiB [emitted]
js/hello-2fdc9fe0cca573bb67bf.js.map.gz 1.76 KiB [emitted]
manifest.json 661 bytes [emitted]
manifest.json.br 166 bytes [emitted]
manifest.json.gz 196 bytes [emitted]
Entrypoint application = js/application-b370c4d05b39ba610e8a.js js/application-b370c4d05b39ba610e8a.js.map
Entrypoint hello = js/hello-2fdc9fe0cca573bb67bf.js js/hello-2fdc9fe0cca573bb67bf.js.map
[0] (webpack)/buildin/module.js 552 bytes {0} [built]
[1] ./app/javascript/packs/application.js 742 bytes {0} [built]
[5] ./app/javascript/channels/index.js 205 bytes {0} [built]
[6] ./app/javascript/channels sync _channel\\.js$ 160 bytes {0} [built]
[7] ./app/javascript/packs/hello.js 23 bytes {1} [built]
+ 3 hidden modules
ビルド結果のファイルがpublic/packs/js配下に生成されていました。
