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で設定しておくこともできます。

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入門。すぐに使える最も簡単な使い方
  2. webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
  3. webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

※2021/12/7 もっと分かりやすくなるように、内容を追加《ついか》、修正《しゅうせい》しました。 さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プ

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カード」と

Node.js

MacにNode.jsをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はMacにNode.jsをインストールする方法を紹介していきます。 インストールの方法はいくつかありますが、今回はインストーラー(pkg)を使った

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

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。 前回の記事は

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

コメントを残す(コメントは承認後に反映されます)

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