サイト制作に関するメモ書き

HOME > JavaScript > webpackを使ってみる

webpackを使ってみる

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と同じになります。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP