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をインストールします。
|
1 |
npm install webpack --save-dev |
package.jsonの11～13行目が追加されたと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "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のひな形です。
|
1 2 3 4 5 6 7 |
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行目を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "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 というコマンドが実行できるようになります。
以下、実行結果です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 4 5 |
function a() { return 'a!'; } module.exports = a; |
b.js
|
1 2 3 4 5 |
function b() { return 'b!'; } module.exports = b; |
main.js
|
1 2 3 4 |
var a = require('./a'); var b = require('./b'); document.write(a() + ' : ' + b()); |
index.html
|
1 2 3 4 5 6 7 8 9 10 |
<!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で読み込めば以下のように表示されます。
webpack.config.jsの[name]
webpack.config.js内に[name]が指定できます。entryをJSON形式で記述すると、そのキーが[name]にマッピングされて置換されます。entryがJSON形式でない場合は、[name]はmainで置換されます。
|
1 2 3 4 5 6 7 |
module.exports = { entry: {'prod':'./src/main.js'}, output: { path: __dirname + '/dist', filename: '[name].bundle.js' } }; |
上記のように設定すると、prod.bundle.jsというファイルが作成されます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
