サーバーサイド用にWebpackでプリコンパイルする

サーバーサイド用のNode.jsのソースコードをWebpackでプリコンパイル&バンドルした際に少しハマったので備忘録的に残しておきたいと思います。
ぼくの場合は、Node.jsのサーバーでReactのサーバーサイドレンダリングをする時に必要になりました。クライアントのソースコードがES2015だったりJSX使って書いてるのでそれをサーバーサイドで実行するのにWebpackしておく必要があったという感じです。

Webpackの設定

少し余計なものが入ってますが、webpack.config.jsは下記のような感じで動いています。

const webpack = require('webpack');
require('dotenv').config({
  path: __dirname +'/.env'
});
const env = process.env;
const nodeExternals = require('webpack-node-externals');

module.exports = {
  name: 'server',
  target: 'node',
  externals: [nodeExternals()],
  entry: {
    main: './server1.js'
  },
  output: {
    filename: './server1.bundle.js'
  },
  plugins: [new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    __DEBUG__: env.APP_DEBUG === 'true'
  })],
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          plugins: ['transform-runtime'],
          presets: ['es2015', 'react', 'stage-0']
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      }
    ]
  }
}

特に必要だったものとして下記があります。

target=node

targetをnodeにしないとダメです。

webpack-node-externals

externalsの設定をするのに利用します。下記のように設定しておかないとnode_modulesの中のものまでWebpackが取り込もうとしてしまうようです。

  externals: [nodeExternals()],

json-loader

webpack-node-externalsの設定をしていれば不要かもしれません。プリコンパイルの過程でjsonファイルを読み込む際にエラーになってしまったので必要でした。

package.jsonの設定

package.jsonは下記のような感じで動くと思います。色々不要なものが入ってます。試す場合はご自分の環境や用途に読み替えて頂ければと思います。

{
  "private": true,
  "devDependencies": {
    "chai": "^3.5.0",
    "gulp-mocha": "^2.2.0"
  },
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.7.6",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.9.0",
    "dotenv": "^2.0.0",
    "express": "^4.14.0",
    "json-loader": "^0.5.4",
    "react": "15.3.0",
    "react-dom": "15.3.0",
    "webpack": "^1.13.0",
    "webpack-node-externals": "^1.3.3"
  }
}