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-devpackage.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で読み込めば以下のように表示されます。
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というファイルが作成されます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント