Node.js+Expressなサイトをwebpackしてみた

MEANスタックのA(=Angular)はビルドするとwebpackされます。
N(=Node.js)、E(=Express)はそのままではwebpackされません。webpackするといいことがあると言うことなのでやってみます。

webpack関連のパッケージのインストール

webpackするには、以下のパッケージのインストールが必要になります。

npm install webpack webpack-cli --savedev
npm install webpack webpack-cli -g
npm install webpack-node-externals --save

webpack.config.jsの作成

プロジェクトのルートに、webpack.config.jsを作成する。

• 余計な警告が表示されてないように、webpack-node-externalsをrequireしている。
• .envに、NODE_ENVを定義し、dotenvでロードし、modeにprocess.env.NODE_ENVを指定している(開発環境ではdevelopment、本番環境ではproductionとなる)
• webpackの結果は、dist/serverにserver.jsとして出力される。

webpack.config.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
    mode: process.env.NODE_ENV,
    entry: './src/server/www.ts',
    target: 'node',
    node: {
        __filename: false,
        __dirname: false
    },
    externals: [nodeExternals()], 
    devtool: 'source-map',
    module: {
        rules: [
            {
                enforce: 'pre',
                loader: 'tslint-loader',
                test: /\.ts$/,
                exclude: [
                    /node_modules/
                ],
                options: {
                    emitErrors: true
                }
            },
            {
                loader: 'ts-loader',
                test: /\.ts$/,
                exclude: [
                    /node_modules/
                ],
                options: {
                    configFile: 'tsconfig.json'
                }
            }
        ]
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    output: {
        filename: 'server.js',
        path: path.resolve(__dirname, 'dist/server')
    }
};

webpackでビルドされるように構成

package.jsonのscriptのbuild周りを以下のようにする

package.json

  "scripts": {
    "start": "node ./dist/server/server.js",
    "build": "npm run lint-ng && npm run build-ng && npm run build-ts",
    "build-ts": "webpack --config webpack.config.js",
    "build-ng": "ng build --ts-config ./src/app/tsconfig.json",
    "lint-ng": "ng lint",
   }

さて、herokuで動作確認

上記でローカルでは、NとEがwebpackされ、動作も確認できた。
念のため、herokuでも動作を見ておこうと、デプロイしたところ、webpackされている様子がない。
ググって見ると、herokuでwebpackするには、一手間かける必要があるんだとか。

環境変数「NPM_CONFIG_PRODUCTION」の設定

herokuでは、通常、devDependenciesで指定されているパッケージはインストールされない。
こうなるとwebpackが動作しないので、環境変数「NPM_CONFIG_PRODUCTION」を「false」にしておこう。

herukuのビルド後の動作指定

herokuでビルドが完了した後に、webpackが動作するように、package.jsonのscriptに以下のものを追加する。

package.json

  "scripts": {
    "heroku-postbuild": "webpack -p"
  }

これで、herokuでもwebpackできる。