• HOME
• Node.js
• webpackを使ってNode.jsの実行ファイルをまとめる

webpackを使ってNode.jsの実行ファイルをまとめる

Tweet

Node.jsで開発を行う時はモジュール化を使ってコードを理解しやすくしたいですが、外部に提供となると、簡単にソースコードを変更できない状態にしておきたいものです。 ここでは、webpackを使ってNode.jsの実行ファイルをひとつにまとめる方法を紹介します。ひとつにまとめたファイルは改行が削除されたり、変数の置き換えなどがあり、理解しにくいものになります。

webpackのインストール

npm install webpack

webpack.config

コンフィグファイル(webpack.config.js)を作成し、次のように記載します。

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

module.exports = {
  mode: "production",
  entry: {
    main: './app.js',
  },
  target: 'node',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app-build.js'
  },
  externals: [nodeExternals()],
};

entry

entryでエントリポイント(起点)のファイルを指定します。エントリポイントを実行するために必要なファイルが全てバンドルされます。

output

出力ファイルのパスとファイル名を指定します。

externals

node_moduleで警告が出るためwebpack-node-externalsを使って除外指定(externals)します。 webpack-node-externalsは次のコマンドでインストールできます。

npm install webpack-node-externals

ビルド

カレントフォルダで次のコマンドを実行します。

webpack.config.js を使う場合

npx webpack

webpack.config.js 以外を使う場合

npx webpack --config <ファイル名>

シェルスクリプトを登録して実行

package.jsonの"scripts"に次のような行を追加します。
"build"はエイリアスです。valueにあたるコマンドを実行します。webpack.build.config.jsが利用するコンフィグファイルです。

"scripts": {
  "build": "webpack --config webpack.build.config.js"
},

実行は次のコマンドになります。

npm run build

エントリポイントを複数指定する

複数ファイルをエントリポイントに指定する場合は、次のようにwebpack.configを記述します。

entry

キーに名称、valueにファイルを指定します。

  entry: {
    main: './app.js',
    mylib: './mylib.js'
  },

output

[name]にはエントリポイントで指定した各名称が適用されます。

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  }
};

jsonファイルについて

参照しているjsonファイルもバインドに含まれます。一方、可変の設定ファイルなどがバインドされてしまうと値を変更できなくなってしまいます。 そのため、バインドに含めないjsonファイルとする必要があります。

バインドに含まれる記述

let settingData = require('./settings.json');

バインドに含まれない記述

ファイルシステムで読み込むとバインドに含まれません。

const fs = require('fs');
let settingData = JSON.parse(fs.readFileSync('./settings.json', 'utf8'));

Tweet

前の記事

Node.jsからJavaのAPIを使う

次の記事

Node.jsのファイルを難読化する