webpack2でReactを使う

webpacke2でReactの開発環境を作る。

フォルダ・ファイルを作る

$ mkdir react1
$ cd react1
$ mkdir src
$ mkdir public
$ touch public/index.html
$ touch src/index.js
$ touch webpack.config.js
$ touch postcss.config.js

インストール

$ npm init -y
$ npm i -D webpack webpack-dev-server
$ npm i -D babel-loader babel-core babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-react
$ npm i -D extract-text-webpack-plugin
$ npm i -D style-loader css-loader postcss postcss-loader autoprefixer cssnano precss react-css-modules
$ npm i -D react react-dom

package.jsonは下記のようになった。

webpack.config.jsを作る

postcss.config.jsを作る

public/index.htmlを作る

src/index.jsを作る

webpackを実行する。実行後、public/bundle.jsが作成される。

$ webpack

webpack-dev-serverを実行する。実行後、http://localhost:8080にアクセスすると確認できる。

$ webpack-dev-server

webpack + eslint

webpackでeslintを使う場合、eslintとは別に、eslint-loaderをインストールする必要があります。

インストール

そして、webpack、eslintそれぞれの設定ファイルを作成します。

webpackの設定

下記のように、webpack.config.jsを設定します。
moduleのpreLoadersにeslint-loaderの設定を書きます。moduleは、eslint-loader等の-loaderを省略できます。あと、下の方にあるeslintというところで、eslintの設定ファイルを指定します。eslintrc.jsonとか、.eslintrcというファイル名であれば指定は不要かもです。

eslintの設定

eslintのルールは沢山あって自分でルールを使うかどうか決められますが、AirBnBのルールが人気だし、そういうところに合わせておいて悪いことはないと思うので、基本AirBnBを使います。ただ、Reactとbabelを使っているときに沢山エラーがでたので、ちょっと修正しました。AirBnBのルールを使いつつ、このエラーは出なくてもいいやと思ったら、ルールを無効にして調整してます。まだ、使いだしたばかりなので、単なる一例です。

.eslintrc

jsx拡張子に関するルール

reactはjsxを使いますが、jsxを使っているファイルの拡張子はjsxにしないと、AirBnBルールに怒られます。jsxを使っていないファイルはjsのままだと思うので、拡張子がjsとjsx共に、webpackがjavascriptに対して実行する処理を適用させるようにしてみます。

該当ファイルの拡張子をjsxに変更し、webpack.config.jsを下記のように修正します。

webpack

webpack

参考:webpack で始めるイマドキのフロントエンド開発

webpack は WebApp に必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。

webpack を使えば、Grunt も Gulp も必要ありません!覚えるべきことはほとんどありません。(必要なら)簡単な設定ファイルを書いて webpack コマンドを実行するだけです。

インストール

これで、hoge.jsがscript.jsとして作成される。

参考:http://webpack.github.io/docs/installation.html
これを使うと簡易webサーバが立ち上げられるっぽい。

参考:webpack-dev-serverの基本的な使い方とポイント
便利だな。

下記のように、package.jsonのscriptsに、webpack-dev-serverの起動を追加して、npm run webpack-dev-serverとしたらサーバが起動した。設定しないと、プロジェクトルートをwebルートにされました。

webpackの設定

webpack.config.jsというファイルに設定を書き込む。

webpack.config.jsを下記のようにして、webpackを実行するとできた。

devServerのcontentBaseを指定すると、webpack-dev-serverのWEBルートが変更できる。ポートも変更できるらしい。

Hot Module Replacement(HMR)というのも便利そう。

参考:http://webpack.github.io/docs/usage.html

nativeのjavascript以外に対応させるためには、loaderというのを使うらしい。例えばbabelであれば、babel-loaderというのがある。

babelをnpmでインストールしてから、webpack.config.jsに、下記を追加する。

testとかよくわからないけど、jsファイルはbabel-loader通す的な感じでしょうか?これによって、Reactとかも対応可能になるもよう。reactで試してみよう。

参考:babelとwebpackを使ってES6でreactを動かすまでのチュートリアル

main.jsを下記のようにする。

これでwebpackしたら、正常に動いた。

あと、プラグインもあって、例えば、jsファイルの圧縮もある。
webpack.config.jsの最初の行に下記を追加する。

あと、webpack.config.jsに下記を追記する。

これで圧縮された。
webpack -p とするだけで、本番用になるので、圧縮してくれるらしい。

スタイルシートもエントリーポイントのJSに組み込むらしい。
参考:http://webpack.github.io/docs/tutorials/getting-started/
参考:タスクランナーを使わずに webpack だけでフロントエンド開発する方法

cssをmain.jsに組み込む。

webpack.config.jsにcss loaderの設定を追加する。

これでできた。
webpack.config.jsに下記を追加すると、importとかするときに、拡張子をつけなくてよくなる。

あと、webpack-dev-serverは、watchしてくれているらしい。ファイルを変更すると自動的に内部的にwebpackし、その結果をメモリ上に保存するらしい。ファイル自体は作成しない。webpack-dev-serverを利用しない場合は、webpackのwatch機能を利用したらしい。

-dというのは、source mapを作成してくれるものらしい。やってみる。おーでてる。bundle.js.mapが作成されました。多分watchできてそう。

あとは、コードチェックしてくれる、eslintを入れてみる。webpackで使う場合、これもloaderになる。eslint-loader。

どうもERROR in Cannot find module ‘eslint’というエラーがでるので、eslintは別で調べる。