webpackのインストール方法や基本的な使い方について紹介!

Photo by Lewis Ngugi on Unsplash

こんにちは!

個人開発者の南です!

今回は、webpackについて紹介します!

webpackは僕がVueJsやLaravelを勉強中に度々出てきたのですが、イマイチ基本的な使い方とかがわかりませんでした。

そこで、今回はメモとして僕がwebpackについて勉強したものをまとめておきます。

ここでは、webpackについてやインストール方法、基本的な使い方について紹介していきます。

webpackの実際のインストール

では、実際にWebpackのインストールを行っていきます。

まずは、webapckをインストールするためのディレクトリを作りましょう。

適当に「webpack-sample」というディレクトリを作りました。


ディレクトリが作成できたら、「package.json」ファイルを作成します。

「package.json」ファイルは、インストールされたパッケージのリストや管理などに使われるファイルです。

作成するためにまず、ターミナルで先程作成したディレクトリまで移動します。


移動ができたら、次のコマンドを入力します。

コマンドを入力した後は下記のように、「pacakge.json」ファイルが作成されています。


では、次にwebapckをインストールしていきます。

webpackをインストールするには、ターミナルで先程作成したディレクトリに移動している状態で次のコマンドを入力します。

ちなみに、今回はwebpackの「version2.7.0」を使うので、「@2.7.0」と最後につけています。

上記のwebapckのインストールコマンドを入力すると、下記のように色々と表示されると思います。


また、インストール後は「package.json」ファイルの「dependencies」というところにインストールしたwebpackについての記載が追加されます。


これでwebpackのインストールが完了しました。

webpackの動作確認

では、インストールしたwebpackが動作するかどうか確認してみましょう。

動作の確認をするために、下記のディレクトリでJSファイルを作成します。

作成するディレクトリ構成「src/app.js」

中身は適当に次のように作成します。

作成すると次のような感じになると思います。


ファイルの作成が済んだら、次のコマンドを実行します。

コマンドを入力すると、下記のようにコンパイルが完了します。


コンパイルが完了したら、「asset/app.js」というようなファルダとファイルが作成されていると思います。


今回実行したコマンドは、下記のような構成になっています。

・webpackがある場所
・コンパイルするファイルの場所
・コンパイルしたファイルを保存する場所

webpackがある場所について

今回インストールしたwebpackは、「node_modules/.bin/webpack」にあります。

コマンドでは、まず最初に「webpack」がある場所を指定しています。

コンパイルするファイルの場所について

webpackの場所を指定したら、今度はコンパイルをするファイルの場所を指定します。

今回コンパイルするファイルの場所は、「src/app.js」です。

なので、下記のようにコンパイルする場所を指定します。

コンパイルしたファイルを保存する場所について

コンパイルするファイルを指定したら、次はコンパイルしたファイルを置く場所を指定します。

今回はコンパイルしたファイルを、「asset/app.js」という形で保存するので、最後に「asset/app.js」と記載します。

webpackを使ってコンパイルする方法は上記の方法で、完了です。

ただ、毎回コマンドで指定するのがめんどくさかったり、jsのファイルが増えた時にどうするのか?

っといったこともあると思います。

そのために、webpackには設定ファイルを作ることができます。

次は、その設定ファイルの基本的な書き方について紹介します。

webpackの設定ファイルの書き方

次はwebpackの設定ファイルの書き方について、紹介します。

webapckの設定ファイルは、「webpack.config.js」という名前でトップのディレクトリにファイルを作ります。


ファイルが作れたら、下記のように記述します。

設定ファイルができたら、下記のコマンドを実行してみましょう。

エラーが出た場合

おそらく、コマンドを実行すると下記のようにエラーが出た人がいると思います。

「Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “./asset” is not an absolute path!」


これは、「path:」の部分で指定されているパスが絶対パスではないといったエラーになります。

これを解決するために、webpackの設定ファイルを下記のように変更しましょう。

設定ファイルの変更ができたら、改めて下記のコマンドを実行してみましょう。

今度は、ちゃんとファイルがコンパイルされると思います。


複数のJSファイルをコンパイルする方法について

複数のJSファイルをコンパイルする場合は、webpack設定ファイルの「entry」部分に配列形式で記述されればできます。

試しに「src/app2.js」というファイルを作成します。


ちなみに、中身は下記のような内容にしました。

ファイルが作成できたら、下記のように設定ファイルを書き換えます。

あとは、下記のコマンドを実行してファイルをコンパイルします。

コンパイルしたファイルの中身を見てみると、下記のように表示されていると思います。


これで、ファイルが複数の場合も配列形式にすることで1つのファイルにまとめることができます。

まとめ

今回はwebpackのインストール方法と基本的な設定ファイルの書き方について紹介しました。

この記事が僕と同じようにwebpackの基本について知りたいと思ったあなたの役に立てれば嬉しいです。

この記事を書いた人

南 健太郎

1991年生まれ。関西を中心にフリーのプログラマーをしています。
今は個人開発で生活できるようになるため、日々試行錯誤中。
個人開発や日々の技術に関する情報などを発信していきます。
Twitterやってます!
良かったらフォロー、よろしくお願いします!
Twitterのリンクはこちら