Webpack4 で React環境を整える(sassも)

Webpack4 で React環境を整える(sassも)

Webpack4 で React環境を整える(sassも)

Webpack4 で React環境を整える(sassも) へのコメントはまだありません

Webpack3で、開発するのに慣れていたんだが、知らぬ間にVer4のwebpackが出ている。
webpack4からは、コンフィグレスを目指しているみたいだけど、コンフィグも多少いるし、Ver3とは書き方がずいぶん替わっているので、軽くまとめておく。

webpack2

開発フォルダ作成

開発用パッケージの導入

必要パッケージの導入

package.jsonの調整

testだけになっているところに、buildとstart を追加。

これで、 npm run build/ npm run start が使えるようになる。

webpack.config.jsの調整

ルートフォルダにwebpack.config.jsファイルを作成します。
ここで、reactが動作するための最低限の設定を書きます。
(結局、設定ファイルいるじゃん、、、というのはさておき。)

CSSやSCSSを読みこんだり、画像ファイルを読み込むところはまだ、調べていないのであしからず。

Reactの極小アプリを作る

wp4react/src/main.js

wp4react/src/components/HelloComp.js

wp4react/dist/index.html

動作検証

http://localhost:8080がブラウザーで起動します。

Sassファイルもインクルード

sassも一緒に開発するのが普通なので、そのために必要な処理を列記しておきます。

開発用パッケージの導入

Sassのサンプルコード挿入

wp4react/src/sass/common.scss

wp4react/src/sass/modules/first.scss

webpack.config.jsで sassを読み込めるように

アプリにsass読み込みを追記

wp4react/src/main.js

以上。

次の記事で、Webpack4環境でReduxのTodoサンプルを動かすというのを
書いてみようと思います。


About the author:

Tags:

Related Posts

Leave a comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Back to Top