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

スポンサードリンク

関連コンテンツ

オススメ記事

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

小学生から始めるプログラミング入門。プログラミングってなぁに?

2020年から小学校でプログラミングが必修(ひっしゅう)となりますが、「プログラミングなんてやったことないし、何から初めていいのか分からない」といった方も多いのではないでしょうか。 プログラミン

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

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

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

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

コメントをどうぞ!

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