webpack.starter-kit

メインアプリケーション（Webサーバー）を起動。

npm start

http://localhost:1341/

Build

ビルドのみを実行し bundle.js を生成する場合（本番用）

npm run build

設定まわり

.editorconfig

http://editorconfig.org/

エディターのindentなどの設定を合わせる。各エディタに合わせてプラグインをインストールする必要があります。

環境まわりの説明

環境設定部分の躓いたところなど書いています。

package.jsonで使ってるライブラリについてなどかいていきます。

webpack

webpackでwebpack/webpack-dev-server.jsで browser-syncを使ってwebサーバーと監視用のサーバーを立てています。

下記をしようすることでブラウザをリロードすることなく即時変更が反映するようになっています。

react-hot-loader
webpack-dev-middleware
webpack-hot-middleware

webpack-dev-server.jsとwebpack.app.config.jsで設定を行っています。

  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    ...
    
    
  loaders: [
    {
      loaders: [
        'react-hot-loader',
        'babel-loader'
      ],
      
      ...

下記参考

webpack, React Hot Loader + Browsersync でクロスブラウジング+ホットリロード開発

React Hot Loaderで開発をさらに加速する

webpackのHot Module ReplacementでWebフロントエンドを爆速開発

webpack 3.0.0を使うにあたり

OccurenceOrderPluginの名前がOccurrenceOrderPluginに変更されてるなどの地味な変更があり注意
module:{postcss: function(){}}のようにmodule内にpostcssを書くとエラーが表示される

webpack-contrib/postcss-loader#92

下記のようにpluginsとして追加することで回避する。

plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          require('autoprefixer'),
          require('precss')
        ]
      }
    })
]

kamem/webpack.starter-kit