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」の使い方を覚えよう

スポンサードリンク

関連コンテンツ

オススメ記事

ブログSEOに絶対的効果!人を惹きつける記事タイトルの考え方のコツ

ブログのSEO対策において、もっとも重要なのは記事の内容、そしてタイトルです。 情報を探している人はまずタイトルを見ます。つまりタイトルによって人がその記事をクリックするかどうかが決まります。

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

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

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

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

コメントをどうぞ!

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