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