node.jsのwebpack入門

2018.01.24

node.jsのwebpack入門

node.jsにはwebpackという複数のjsをバンドル(束ねてくれる)してくれるモジュールが存在します。

有名なバンドラでいうと、Browserify(ブラウザリファイ)などがあります。

a.js,b.jsというファイルが存在し、main.jsでa.js,b.jsをrequireしているとします。

この関係は、main.jsはa.js,b.jsと依存関係にある、と言います。

この依存関係を解決してくれるのがwebpackです。

プロジェクトを作るには、「npm init」を参照してください。(package.jsonが作成されます。)

webpackをインストールする

次にwebpackをインストールします。

npm install webpack --save-dev

package.jsonの11～13行目が追加されたと思います。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

webpack.config.jsの作成

バンドルする(複数のjsファイルを一つのjsにする)には、webpack.config.jsというファイルを作成する必要があります。

プロジェクト直下に配置するのが通常かと思います。以下、webpack.config.jsのひな形です。

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
};

entryとは

entryで設定するファイルは、各ファイルの依存関係の大元のファイルを指定します。

今回はmain.jsでa.js,b.jsをrequireしているので、エントリポイントはmain.jsとなります。

outputとは

outputで設定するのは、バンドルするファイル名などを設定します。

pathとは

pathはバンドルしたjsファイルの配置先です。

filenameとは

filenameはバンドルしたjsファイル名となります。

webpackコマンドを実行する

webpackコマンドを実行するには色々手法がありますが、今回はpackage.jsonのscriptで実行してみます。

package.jsonの8行目を追加します。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "bundle" : "webpack"
},
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

これで、npm run bundle というコマンドが実行できるようになります。

以下、実行結果です。

C:\Users\xxxxx\myapps\vscode>npm run bundle
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm
is using C:\Program Files (x86)\Nodist\v-x64\6.10.3\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> test@1.0.0 bundle C:\Users\xxxxx\myapps\vscode
> webpack

Hash: 68388c0ff9023cdafacd
Version: webpack 3.10.0
Time: 101ms
Asset Size Chunks Chunk Names
bundle.js 2.87 kB 0 [emitted] main
[0] ./src/main.js 132 bytes {0} [built]
[1] ./src/a.js 57 bytes {0} [built]
[2] ./src/b.js 57 bytes {0} [built]

アウトプットとして、dist\bundle.jsが作成されます。

htmlファイルでこのbundle.jsを読み込む

これで依存関係が解決されたbundle.jsというファイル(別に名前は任意です)が作成されました。

ちなみにa.js,b.js,main.jsはそれぞれ以下の通りとします。

a.js

function a() {
  return 'a!';
}

module.exports = a;

b.js

function b() {
  return 'b!';
}

module.exports = b;

main.js

var a = require('./a');
var b = require('./b');

document.write(a() + ' : ' + b());

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <h1>webpack test</h1>
    <script src="./dist/bundle.js"></script>
</body>
</html>

このbundle.jsというファイルを例えば、上記のようにindex.htmlで読み込めば以下のように表示されます。

node.jsのwebpack入門

webpack.config.jsの[name]

webpack.config.js内に[name]が指定できます。entryをJSON形式で記述すると、そのキーが[name]にマッピングされて置換されます。entryがJSON形式でない場合は、[name]はmainで置換されます。

module.exports = {
  entry: {'prod':'./src/main.js'},
  output: {
    path: __dirname + '/dist',
    filename: '[name].bundle.js'
  }
};

上記のように設定すると、prod.bundle.jsというファイルが作成されます。

node.jsのwebpack入門

コメント

タイトルとURLをコピーしました