今年は2月にwebpack 4がリリースされ、4月にNode ver.10がリリース、Babel 7もリリースを間近に控えるなど、フロントエンド周りのバージョンアップが相次いでいます。ここでは webpack 4 + Babel 7 の開発環境で React + Mobx を動かすための設定をまとめておきます。Mac + node v10.3.0で動作確認をしています。

パッケージのインストール

まずは適当なフォルダに移動してpackage.jsonを作成します： 
yarn init
ついでReact関連をインストールします： 
yarn add react react-dom mobx mobx-react
開発環境のインストールはこんな感じです： 
yarn add @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env @babel/preset-react babel-loader@^8.0.0-beta css-loader sass-loader style-loader webpack webpack-cli@2.1.5 webpack-dev-server -D
いくつか注意点があります。

まず @babel/... ですが、これはBabel 7からインストールするパッケージ名が変更されました。angularやionicもそうですが、Babelもパッケージ名の先頭に@がついてスコープ化されるようになりました。

@babel/plugin-proposal-class-properties と @babel/plugin-proposal-decorators はMobXでデコレーターを使用するために必要になります。この二つに関しては次のwebpackの設定で、プラグインに指定するオプションについて説明します。

また webpack-cli のバージョンが2.1.5で指定されていますが、これは記事公開当日に公開された webpack-cli@3.0.0 と webpack-dev-server@3.1.4 との相性が悪いようで、2系の最新版をインストールするようにしています。

インストールが終わった package.json はこんな感じになります：

webpackの設定

パッケージがインストールできたらwebpackの設定を行います。ここではBabelの設定を .babelrc ではなく webpack.config.jsで行うため、jsx の module.rules で query.babelrc を false にセットしています。 module.rules の中の query.plugins ではまず @babel/plugin-proposal-decorators を指定しています。これがないと、MobXで @observable などのデコレーターを使用すると、コンパイル時に 
ERROR in ...
Module build failed: SyntaxError: ...: Support for the experimental syntax 'decorators-legacy' isn't currently enabled
というシンタックスエラーがターミナルに表示されます。

さらに @babel/plugin-proposal-decorators に対して {legacy: true} というオプションを渡してやらないと、コンパイル時に 
ERROR in ...
Module build failed: Error: [BABEL] ...: The new decorators proposal is not supported yet. You must pass the `"legacy": true` option to @babel/plugin-proposal-decorators
というコンパイルエラーが表示されます。

@babel/plugin-proposal-class-properties では {loose: true} というオプションを指定しています。これがないと、 
Uncaught Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and set to use loose mode. To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2.
というランタイムエラーがブラウザのコンソールに出力されます。

この二つのプラグインの順番も大切です。もし @babel/plugin-proposal-decorators を一番最初に記述せずに 
['@babel/plugin-proposal-class-properties', {
loose: true
}],
['@babel/plugin-proposal-decorators', {
legacy: true
}]
のようにすると、 
ERROR in ...
Module build failed: SyntaxError: .....: Decorators transform is necessary.
というシンタックスエラーがターミナルに表示されます。

単純なカウンターアプリを動かす

環境設定が終わったので、単純なカウンターアプリを動かします。用意するファイルは index.html, style.scss, app.jsx です： スタイルは sass-loader が動くのを確かめるために適当に書いてあります。

最後に 
webpack-dev-server
で開発サーバーhttp://localhost:9000を立ち上げて、こんな感じのカウンターが表示されて動作すればOKです。（下のカウンターは画像ではなくamp-iframeで読み込んでいるため、ボタンを押すとカウンターが動作します。）