少しわかりにくかったところ。
cross-env
-
NODE_ENVを含んだscriptsを打つとwindowsのコマンドプロンプトでうまく動作しない - scriptsに含むことでプラットフォームの挙動の差異を無くす
"scripts": {
"watch": "cross-env NODE_ENV=development webpack-dev-server --color",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.babel.js"
},
npm cross-env
dotenvとcross-envで環境変数を設定して開発環境の処理を切り替える
contentBase
webpack.config.babel.js
// webpack-dev-server
devServer: {
open: true,
port: 3000,
// contentBaseに指定したディレクトリに変更があった場合リロードされる
watchContentBase: true,
contentBase: path.join(__dirname, 'public'),
},
- portの3000を明示するために
contentBaseにはビルド後のファイルをカレントディレクトリとして指定する - 注意すべきは
watchコマンドを打った場合、実際にはビルドされずメモリに保存されるだけという点（ブラウザには反映される） - 通常ビルド後のファイルに変更があってもdevserverは応答しないが、
watchContentBaseをtrueにすることでビルド後のファイルにも対応できる
webpack-dev-server のオプション全部試した
webpack-dev-serverで開発用サーバを立てる
.babel拡張子について
- なぜ
webpack.config.babel.jsがES6以降の書き方にも関わらずトランスパイルされているのか - 結論
interpret の仕組みはとても簡単で、設定された拡張子に対して動的な前処理を適用するだけです。 interpret の方で、 .babel.js という拡張子に対しては、 babel-register で変換して処理するという風に定義されていますので、 webpack.conf.babel.js でも問題なく処理できるというわけです。