JavaScriptの開発で便利なビルドツールのwebpackを試してみます。
webpackの準備
webpackをグローバルにインストールします。
コマンドプロンプトを起動して、以下を実行します。
npm install -g webpack
インストール完了後、作業ディレクトリへ移動します。
cd 作業ディレクトリ
package.jsonを作成します。
npm init
ローカルにwebpackをインストールします。
npm install webpack --save-dev
これで準備ができました。
webpackの実行
簡単なコードを書いて、実際にwebpackを使ってみます。
main.js
var greeting = require('./greeting.js');
console.log(greeting.greet('加藤'));
greeting.js
module.exports.greet = function(name) {
return name + 'さん こんにちは！';
}
main.jsからgreeting.js内の関数を実行して、consoleを出力するようにしています。
先ほど作成したpackage.jsonのscriptsに以下を追加します。
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack main.js script.js"
},
“build”: “webpack 変換対象のファイル名 変更後のファイル名” の形で追加します。
追加できたら以下を実行します。
npm run build
script.jsというファイルが作成できれば成功です。
webpackのデモページ
webpack.config.jsの作成
webpackの設定ファイルを作ってみます。
webpack.config.jsというファイルを作成して、以下のように記述します。
webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'script2.js'
}
};
package.jsonの変更を元に戻してから、以下を実行します。
webpack
script2.jsというファイルが作成できれば成功です。
webpackのデモページ2
内容は最初に作成したscript.jsと同じになります。
【参考サイト】
コメントが承認されるまで時間がかかります。