ReactでのWebpackの設定の仕方と解説【Babel,ESlint,Sass(CSS)】

webpackを使っていて、バージョンを上げるとハマり、色々と設定を触ったりインストールのしなおしをしたので、ついでに最初からインストールし設定していく手順を残しておきます。

 

 

 

環境は以下になります

 

使用するプロジェクト内で

をすることでパッケージファイル管理のpackage.jsonができる。

package.jsonを編集して以下のように書き加えます。

 

次にnpmパッケージをどんどんインストールしていきます。

今回はReactを使うのでReactを入れています。

(※ i は install の略)

npm オプションの詳しいことは公式のここにあります。(https://docs.npmjs.com/misc/config)

 

・1行目はReactに関するパッケージ

・2行目はwebpackとローカルでサーバをたてるためのdev-server

・3行目はESlintに関するパッケージ

・4行目はcssに関するパッケージとBabelのパッケージ

・5行目でSassを読み込む(コンパイル)に必要なパッケージ

 

を入れています。

 

インストールしたパッケージはpackage.jsonの、

dependencesに追加されています。確認してみると

こんな感じになっていると思います。

 

それからpackage.jsonと同じ階層に以下のファイル(ディレクトリ)を新しく作成していきます。

.babelrc

.eslintrc.json

webpack.config.js

public/index.html

src/index.js

src/index.scss

 

 

順にファイルの中身を書いていきます。

.babelrc

 

.eslintrc.json

 

webpack.config.js

Webpackはソースファイルを元にloaderを実行してBabelの変換などがされたjsファイルを出力します。これが利用されることになるので、その変換の過程の設定をこのファイルでしています。(主に入力するソースをentry, 出力するファイルをoutputで指定、loaderによる変換をmoduleのruleで設定しています)

 

 

public/index.html

 

 

src/index.js

 

src/index.scss

 

とりあえず意味は置いておき、これで

をしてエラーがでなかったらlocalhost:8080にアクセスすれば

問題なく次のように表示されていると思います。

これでReactとSassを使う環境ができました!

 

 

もしも次のようなBabelのエラーが出た場合は

以下の二つのコマンドでパッケージを追加して再度やってみると上手くいくと思います。(バージョンの関係なのだと思いますが、この辺はあまりよく分かっていません…)

 

 

では順にReactを除くパッケージを解説していきます。

 

 

まずBabel(babelパッケージ)ですが、これはES6記法をES5に変換してくれるツールです。これでES6で書いても、全ブラウザで完全に対応できるようになります。ES6を書くなら必須のツールです。

 

次にESlintです。これでJSの構文チェックを行ってくれます。実際にブラウザに反映させる前に間違いがあればエラーを出してチェックしてくれるので、開発効率を高めてくれます。

 

次にCSS関連(sass-loader, css-loader, style-loader)です。

役割としては

・sass-loader: scssファイルをコンパイルしてcssに変換

・css-loader: cssファイルをJSで扱えるようにする。

・style-loader: cssのスタイルを適用してくれる。

というものになります。

 

素のJSではCSSは読み込めませんが、 css-loaderを使う事で、JSでCSSを扱うことができるようになります。index.jsの

これでscssを取り込んでいますが、これでscssデータを取得できるのはまずsass-loaderでcssに変換した後にcss-loaderによってJSで扱えるようにしているから、となります。

 

ただ、 css-loaderだけではそのscss, cssファイルを読み込めても、スタイルを反映させることまではできません。そのため、実際に読み込んだscss, cssのスタイルを反映してくれるのがstyle-loaderになります。つまりsass-loader, css-loaderとstyle-loaderは必ずセットで使う事になります。

 

ここでもう一度webpack.config.jsファイルのmoduleのscssファイルの設定の部分を見てほしいのですが、今言ったloaderの実行順と、ファイルに書かれているloaderの順が逆になっていると思います。これはmoduleのloaderの実行順が後ろからになっているからですので、気を付けておきたいところです。

 

 

ちなみに、webpack.config.jsのソースの下でも少し書きましたが、npm startでサーバーを立ち上げて実行する際には、実行時に各ソースファイルからloaderを実行して新たに出力されたファイルが読み込まれてブラウザに反映されています。ちなみにこのソースファイルから変換を施して新たにJSファイルを出力する一連の流れをバンドルと言います。

 

今回だとバンドルによってpublic/js/app.jsファイルが作成されています。

 

バンドルされているため、scssファイルをコンパイルしたcssファイルを見たいと思ってもこのままでは見れません。これを見るにはcssファイルだけを別に出力してくれるnpmのパッケージ(mini-css-extract-plugin)を入れないといけないのですが、これは今回の内容の範囲外なので割愛します。

これに関しては以下のところが参考になるかもしれません。

【webpack 4】環境構築からJSとCSSを別出力まで(備忘録)

 

 

それから

という部分ですが、ここは実際にReactを書いていく上で別のjs/jsxファイルをインポートするとき、例えばcomponents/Hoge.jsxファイルを読み込むときは、以下のようなコードを書くのですが、

上のresolveがないとエラーが出てしまいます。拡張子を省いている場合ファイル解決ができません。このファイル解決のためにresolveを設定しています。

 

 

最後にgit管理する場合, とりあえずは.gitignoreの設定は以下のようにしておくと良さそうです。

node_modulesは npm installですぐに生成できるものなので管理する必要はなく、public/はwebpackで出力されるファイルなので、実行すれば良いだけなのでこれも必要はないという感じです。

 

 

まとめていて、webpack周りの良い勉強にもなりました。

理解して、快適にWebpack, Reactを使っていきたいですね。

 

 

 

※コンパイルは成功しているけど、次のようなWarningが出ている場合

 

解決できるならしたいですがファイルサイズのデフォルト設定値が厳しく難しかったりするので、警告を単に消すだけでもいいと思います。

 

 

消し方ですが、

 

webpack.config.jsファイルの、resolveの下に次の一文を追加します。

これで警告が消えます。

 

 

 

参考リンク

webpackでCSSやSASSを使う

webpackの設定をdevとproductionで分ける一例

最新版で学ぶwebpack 4入門 – スタイルシート(CSSやSass)を取り込む方法

パフォーマンス警告の対処法

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です