📌

Webpackerとは

に公開
Rails
tech

Webpackerとは

簡単にいうとgemの一種です。Webpackが楽に使えるように作られました。
かんたんに言うと､JavaScriptのビルドツール｢Webpack｣のラッパーのことで､Webpackを使用してRails上でJavaScript開発をするために必要な一連のまとまりを実装することができるgemです｡

Webpackとは

そもそもWebpackとは、CSSやJavaScript、画像などのプログラムを作成する際の部品であるアセットを、１つのファイルとしてまとめてくれるものです｡

よく使用するコマンド

/bin/webpack
JavaScriptやCSSなどをコンパイルするためのコマンド

$ /bin/webpack
warning ../../package.json: No license field
Hash: d6810dc278bdee104bc0
Version: webpack 4.47.0
Time: 3228ms
Built at: 01/08/2024 12:54:25 PM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-6a9afe6276aaccf5de02.js    557 KiB  application  [emitted] [immutable]  application
js/application-6a9afe6276aaccf5de02.js.map    548 KiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]
Entrypoint application = js/application-6a9afe6276aaccf5de02.js js/application-6a9afe6276aaccf5de02.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/application.js] 535 bytes {application} [built]
[./app/javascript/stylesheets/application.scss] 664 bytes {application} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 12.2 KiB {application} [built]
    + 116 hidden modules

ここで

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve './stylesheets/application.scss' in '/home/ec2-user/environment/takujinn/app/javascript/packs'
 @ ./app/javascript/packs/application.js 10:0-40

このようなエラーに何度もでくわし苦しめられました。。。
jsが読み込めませんというエラーですが、この時はただ./stylesheets/application.scssが../stylesheets/application.scssに
なっていなかっただけですが。。。

終わりに

webpackはなかなかとっつきにくく自分でもあまりわかっていないので、説明に不備があれば
コメント等で教えてもらえると幸いです。

Discussion