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の使い方を紹介します。

目次
  1. webpack.config.jsとは
  2. webpack.config.jsの作成
  3. エントリーポイントの変更
  4. 出力先フォルダやファイル名の変更
  5. Loaderを使う
  6. プラグインを使う
  7. modeを指定する
  8. まとめ

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の基本的な使い方と設定方法の詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……

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

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

Scratchでピアノを 作ってみよう!

小学生から始めるScratch入門。ピアノ鍵盤を作って音を鳴らそう!

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="ar

オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第6弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

文字を表示するクラスを作ろう!

小学生からのJavaScript。文字を表示するクラスを作ってみよう!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

コメントをどうぞ!

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