1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. webpack
  6. »
  7. 【初心者向け】webpack 4入門。一番簡単で詳しい使い方

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。

さて、今回はWebpack4について紹介していきたいと思います。
この記事では、jsファイルをビルドするまでの、一番簡単な方法を紹介したいと思います。

目次
  1. webpackとは
  2. 準備
  3. webpackのインストール
  4. webpackの実行
  5. index.htmlから読み込んで確認する
  6. 複数のJSファイルをまとめてみる
  7. modeについて
  8. まとめ

webpackとは

webpack公式サイト
webpack

webpackは、モジュールバンドラと呼ばれるものの一つです。
分割したJavascriptのソース(モジュール)を、適切な形にしてまとめてくれます。

長いソースを書いているとどこに何を書いたか分からなくなってしまったりして、効率が悪いです。
それを防ぐには、複数のファイルに分けて作っていけばいいわけで、その複数のファイルをまとめてくれる(バンドルしてくれる)のがwebpackです。
モジュールをバンドルするので、モジュールバンドラですね。

また今回は省略しますが、webpackには、CSSやSASS、画像ファイルなどもJavascriptにまとめるなど、様々な機能があります。

準備

では、webpackを使う準備に入ります。

ディレクトリ構成

まず最終的なディレクトリ構成を見ておきます。

webpack-sample/
┣dist/
┃┣index.html
┃┗main.js
┣node_modules/
┃┣.../
┃┗.../.../
┣package-lock.json
┣package.json
┗src/
    ┣animal.js
    ┗index.js

これから順番に作っていくので、今はこの階層については気にしなくて大丈夫です。最後の確認に使ってください。

またwebpackでは、設定を記述しておく為の「webpack.config.js」という設定ファイルを使うのが一般的ですが、webpack4からは必ずしも必要というわけではありませんので、今回は使わない方法でビルドしてみようと思います。

必要なディレクトリやファイルの作成

では、webpackを使う、「webpack-sample」というフォルダを作り、その中へ移動してみます。

$ mkdir webpack-sample
$ cd webpack-sample

さらに、srcフォルダを作り、その中にindex.jsファイルを作ります。
何も設定していない場合、srcフォルダのindex.jsファイルが読み込まれる事になります。

$ mkdir src
$ cd src
$ touch index.js
$ cd ../

また、index.jsファイルには、適当なJavaScrptのコードを書いておきましょう。

src/index.js

let string = 'webpack入門';
console.log(string);

package.jsonファイルの作成

package.jsonファイルを作成します。
npmコマンドを使いますので、Node.jsが入っていない場合、インストールしておいてください。

以下のコマンドでpackage.jsonファイルを作成します。

$ npm init -y

これで準備が整いました。

webpackのインストール

では、webpackをインストールしてみましょう。

$ npm install webpack webpack-cli --save-dev

インストールの完了です。

webpackの実行

今回は一番簡単な方法ということで、手軽にできる以下の方法で実行してみます。

$ npx webpack
〜省略〜
[0] ./src/index.js 47 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

WARNING(警告)が出ていますが、一応ビルドはされます。
もしWARNINGが気になる場合は、オプションとしてmodeを指定してあげると出なくなります。

$ npx webpack --mode=development

modeに指定できるのは、developmentproductionnoneです。

developmentというのは、開発用のモードです。
modeについては後ほど「modeについて」に記述します。

index.htmlから読み込んで確認する

index.htmlファイルを作成し、実際にmain.jsを読み込んでみましょう。
今回はdistフォルダにindex.htmlファイルを作成してみます。

$ cd dist
$ touch index.html

index.htmlは、以下のようにします。

dist/index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack</title>
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

ブラウザでindex.htmlを開き、コンソールを確認すると、次のようにちゃんと動作していることが分かります。
webpack

複数のJSファイルをまとめてみる

動作が確認できたら、次は複数のjavascriptファイルをまとめてみましょう。
今回は2つのjsファイルをまとめてみたいと思います。

まず、先ほど作ったsrc/index.jsファイルの内容を変更します。

src/index.js

import Animal from './animal.js';
 
let animal = new Animal();
animal.cat();
animal.dog();

更に、srcフォルダにanimal.jsファイルを作成します。

src/animal.js

export default class Animal {
	cat() {
		console.log('にゃー');
	}
	dog() {
		console.log('わん');
	}
}

では、コンパイルしてみましょう。

$ npx webpack --mode=production

下ように表示されれば成功です。
webpack

modeについて

modeはどのように最適化するかを指定できるものです。
development、production、noneを指定できます。

また、デフォルトはproductionです。

development

開発用のモードです。普段の開発ではこのモードで出力します。
コンパイルが速い、ソースマップが作られる、などのメリットとがあります。

developmentモードで出力されるコードは、コメントだらけのとても長いものなので、初めて見たときは「なんだこれ」と思うかも知れません。

また、ブラウザのデベロッパーツール(Chromeの場合)からソースマップを見ることもできます。
webpack

production

圧縮されたタイプで出力されるモードです。本番用のファイル出力に使います。
出力されるファイルのサイズが小さい、コードを実行する速度が速い、などのメリットとがあります。

例えば、先ほどのソースをproductionでコンパイルすると、次のようなmain.jsが出力されます。

dist/main.js

!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);let o=new class{cat(){console.log("にゃー")}dog(){console.log("わん")}};o.cat(),o.dog()}]);

none

最適化しません。

まとめ

webpackは複数のJavaScriptなどのファイルをまとめてくれる、モジュールバンドラと呼ばれるものの一つです。
複雑なコードを書いていると、だんだんと何を書いたか、どこに書いたか分からなくなってしまいます。そんな手助けをしてくれるのがwebpackです。

今回紹介した以外にも、たくさん機能がありますので、また徐々に紹介していければと思います。

以上、webpackの一番簡単な使い方について、紹介させていただきました。

この企画の一覧はこちら

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

スポンサードリンク

関連コンテンツ

オススメ記事

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

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

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

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

WordPress

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

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

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

FC2 blog customize

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

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

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

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

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

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

java

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

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

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

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

コメントをどうぞ!

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