1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. webpack
  6. »
  7. webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。
今回は、webpack.config.jsの使い方を紹介します。

webpack.config.jsとは

webpack.config.jsは、webpackの設定ファイルです。
エントリーポイントや、ファイルの出力場所、プラグインなどを設定することができます。

webpack.config.jsの作成

まず、webpack.config.jsファイルを作成しておきましょう。

$ touch webpack.config.js

エントリーポイントの変更

エントリーポイントとは、プログラムの実行を開始する場所のことです。
デフォルトでは「./src/index.js」になります。
では、エントリーポイントを変更してみましょう。

webpack.config.js

module.exports = {
  entry: './js/script.js'
};

上の例では、エントリーポイントを「./js/script.js」に変更しています。

出力先フォルダやファイル名の変更

コンパイルしたファイルの出力先やファイル名を変更できます。

デフォルトでの出力先は、「./dist/main.js」ですが、これを「./dest/bundle.js」に変更してみます。

webpack.config.js

module.exports = {
	entry: './js/script.js',
	output: {
		path: __dirname + '/dest',
		filename: 'bundle.js'
	}
};

Loaderを使う

Loaderを使う方法です。
今回は例としてBabelを使ってみたいと思います。

まず、以下のコマンドでBabelをインストールします。

$ npm install babel-loader babel-core babel-preset-env --save-dev

webpack.config.jsは、以下のようにします。

webpack.config.js

module.exports = {
	entry: './js/script.js',
	output: {
		path: __dirname + '/dest',
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules | bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			}
		]
	}
};

追加したのは7〜20行目です。

testプロパティは、変換するファイルを特定します。
正規表現で表しますので、「/\.js$/」というのは、「.js」で終わるファイル、つまりはJavaScriptファイルを表します。

excludeプロパティは、除外するファイルを指定します。
今回の例では、npmでインストールした時に作られる「node_modules」フォルダと、bowerでインストールした時に作られる「bower_components」フォルダを指定しています。

useプロパティは、変換に使うローダを指定します。
今回の例では、loaderにbabel-loaderを、optionsでオプションを指定しています。

プラグインを使う

プラグインを使ってみましょう。
今回は「html-webpack-plugin」を使ってみたいと思います。

このプラグインを使うと、コンパイル時にhtmlファイルが作られるようになります。

では実際に使ってみましょう。

$ npm install html-webpack-plugin --save-dev

webpack.config.js

const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {
	entry: './js/script.js',
	output: {
		path: __dirname + '/dest',
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules | bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			}
		]
	},
	plugins: [ new HtmlWebpackPlugin() ]
};

追加したのは、1行目と23行目です。
このwebpack.config.jsの場合、destフォルダにindex.htmlファイルが作成されます。

modeを指定する

前々回のwebpackの記事では、modeはオプションを使って指定していましたが、webpack.config.jsで設定しておくこともできます。
modeについて知りたい方は、【初心者向け】webpack 4入門。一番簡単で詳しい使い方 | modeについてをご覧ください。

const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {
	entry: './js/script.js',
	output: {
		path: __dirname + '/dest',
		filename: 'bundle.js'
	},
	mode: 'development',
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules | bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['env']
					}
				}
			}
		]
	},
	plugins: [ new HtmlWebpackPlugin() ]
};

追加したのは9行目です。これで開発用のモードで出力されます。

まとめ

webpack.config.jsファイルはwebpackの設定ファイルです。
これを使うことで、webpackの様々な設定を行うことが可能です。

webpackにはまだまだ多くの機能がありますので、徐々に紹介していければと思います。
以上、webpack.config.jsの使い方でした。

参考ページ:webpack Concepts

この企画の一覧はこちら

  1. 【初心者向け】webpack 4入門。一番簡単で詳しい使い方
  2. 【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法
  3. webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
  4. webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第10弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変数(

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

コメントをどうぞ!

メールアドレスが公開されることはありません。