webpack.express.starter-kit

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

npm start

http://localhost:3142/

Build

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

npm run build

設定まわり

.editorconfig

http://editorconfig.org/

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

環境まわりの説明

環境設定部分の躓いた部分や、どういう構成で動いているのかを書いています。

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

構成

npm run dev
npm run dev:lint

js監視用

で下記全てを実行しています。

npm run start-dev
npm run start-dev:lint

http://localhost:1341/js/bundle.js

※ :lintの場合（process.env.LINT === 'true'）はwebpackのeslint-loaderを使って監視するようになっています。

このjsをdev環境のときだけ読み込むようにしています。下記のようにejsなどを使ってNODE_ENVの起動時の値によって切り分けています。

<% if (env === 'development') { %>
<script src="//localhost:1341/js/bundle.js"></script>
<% } else { %>
<script src="js/bundle.js"></script>
<% } %>

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

実際のサーバー

start-server:prd
start-server:dev

http://localhost:3141/

portはserver/settings.js内に書いてます

browser-sync

npm run browser-sync

ev/browser-sync.jsをもとに、bundle.jsに関係ないpostcssなどのファイルが更新された際に自動反映するサーバーを立てています。

server/settings.js内のportに +1したportで実際の作業用のサーバーが立ち上がります。実際にはhttp://localhost:3141/の内容をproxyしています。

http://localhost:3142/

eslint

"lint:src": "eslint ./src --fix",
"lint:server": "eslint ./server --fix",

srcがフロント側、serverがバックエンド側のeslintを実行します。 npm run dev:lintを実行するとまとめて2つとも実行されます。

webpack

webpack-dev-server.express.jsで、開発環境用のbundle.jsをリロードなしで反映されるように webpack-dev-middlewareとwebpack-hot-middlewareを使って監視サーバーを立てています。

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

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

webpack側でのhot reloadの設定と合わせて.babel側にも記述しています。

  "env": {
    "development": {
      "plugins": [
        ["react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": ["react"],
                "locals": ["module"]
              },
              {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
          }
        ]
      ]
    }
  }

参考

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')
        ]
      }
    })
]

postcss

npm run postcss

postcss.config.jsに使いたいプラグインを記述しています。

precssを使いたいと思ったのですが、postcss-cliを使った場合に importで読み込まれてる先のファイルを編集した際にwatchが発動しなかったため、 postcss-importを使うようにして個別で使いたいプラグインを読み込んでいます。

nodemonを使った場合のserver側のeslintについて

npm run start-server:dev


NODE_ENV=development nodemon -r babel-register --watch server -e js,ejs bin/www --exec 'npm run lint:server && node'

--exec 'npm run lint:server && node'を設定することによりlintが通らないと実行されないようになっています。

参考

how to do linting using nodemon?

kamem/webpack.express.starter-kit