南 健太郎 
Photo by Lewis Ngugi on Unsplash
こんにちは！
個人開発者の南です！
今回は、webpackについて紹介します！
webpackは僕がVueJsやLaravelを勉強中に度々出てきたのですが、イマイチ基本的な使い方とかがわかりませんでした。
そこで、今回はメモとして僕がwebpackについて勉強したものをまとめておきます。
ここでは、webpackについてやインストール方法、基本的な使い方について紹介していきます。
webpackの実際のインストール
では、実際にWebpackのインストールを行っていきます。
まずは、webapckをインストールするためのディレクトリを作りましょう。
適当に「webpack-sample」というディレクトリを作りました。
ディレクトリが作成できたら、「package.json」ファイルを作成します。
「package.json」ファイルは、インストールされたパッケージのリストや管理などに使われるファイルです。
作成するためにまず、ターミナルで先程作成したディレクトリまで移動します。
移動ができたら、次のコマンドを入力します。
|
1 |
npm init -y |
コマンドを入力した後は下記のように、「pacakge.json」ファイルが作成されています。
では、次にwebapckをインストールしていきます。
webpackをインストールするには、ターミナルで先程作成したディレクトリに移動している状態で次のコマンドを入力します。
ちなみに、今回はwebpackの「version2.7.0」を使うので、「@2.7.0」と最後につけています。
|
1 |
npm install --save-dev webpack@2.7.0 |
上記のwebapckのインストールコマンドを入力すると、下記のように色々と表示されると思います。
また、インストール後は「package.json」ファイルの「dependencies」というところにインストールしたwebpackについての記載が追加されます。
これでwebpackのインストールが完了しました。
webpackの動作確認
では、インストールしたwebpackが動作するかどうか確認してみましょう。
動作の確認をするために、下記のディレクトリでJSファイルを作成します。
作成するディレクトリ構成「src/app.js」
中身は適当に次のように作成します。
|
1 |
alert("This is test"); |
作成すると次のような感じになると思います。
ファイルの作成が済んだら、次のコマンドを実行します。
|
1 |
node_modules/.bin/webpack src/app.js asset/app.js |
コマンドを入力すると、下記のようにコンパイルが完了します。
コンパイルが完了したら、「asset/app.js」というようなファルダとファイルが作成されていると思います。
今回実行したコマンドは、下記のような構成になっています。
・webpackがある場所
・コンパイルするファイルの場所
・コンパイルしたファイルを保存する場所
webpackがある場所について
今回インストールしたwebpackは、「node_modules/.bin/webpack」にあります。
コマンドでは、まず最初に「webpack」がある場所を指定しています。
|
1 2 |
#ここの部分 node_modules/.bin/webpack |
コンパイルするファイルの場所について
webpackの場所を指定したら、今度はコンパイルをするファイルの場所を指定します。
今回コンパイルするファイルの場所は、「src/app.js」です。
なので、下記のようにコンパイルする場所を指定します。
|
1 |
node_modules/.bin/webpack src/app.js |
コンパイルしたファイルを保存する場所について
コンパイルするファイルを指定したら、次はコンパイルしたファイルを置く場所を指定します。
今回はコンパイルしたファイルを、「asset/app.js」という形で保存するので、最後に「asset/app.js」と記載します。
|
1 |
node_modules/.bin/webpack src/app.js asset/app.js |
webpackを使ってコンパイルする方法は上記の方法で、完了です。
ただ、毎回コマンドで指定するのがめんどくさかったり、jsのファイルが増えた時にどうするのか？
っといったこともあると思います。
そのために、webpackには設定ファイルを作ることができます。
次は、その設定ファイルの基本的な書き方について紹介します。
webpackの設定ファイルの書き方
次はwebpackの設定ファイルの書き方について、紹介します。
webapckの設定ファイルは、「webpack.config.js」という名前でトップのディレクトリにファイルを作ります。
ファイルが作れたら、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#webpackをロード。 let webpack = require('webpack'); #外部で使用できるように、エクスポートする。 module.exports = { #どこのファイルを使用するか記述 entry: './src/app.js', #コンパイルしたファイルをどこに保存するか記載。 output: { #コンパイルしたファイルを保存するパスを指定。 path: './asset', #コンパイルしたファイルのファイル名を指定。 filename: 'app.js' } }; |
設定ファイルができたら、下記のコマンドを実行してみましょう。
|
1 |
node_modules/.bin/webpack |
エラーが出た場合
おそらく、コマンドを実行すると下記のようにエラーが出た人がいると思います。
「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の設定ファイルを下記のように変更しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#webpackをロード。 let webpack = require('webpack'); #パス問題を解決するために、「path」をロード。 let path = require('path'); #外部で使用できるように、エクスポートする。 module.exports = { #どこのファイルを使用するか記述 entry: './src/app.js', #コンパイルしたファイルをどこに保存するか記載。 output: { #新しくコンパイルしたファイルを保存するパスを指定し直します。 path: path.resolve(__dirname, './asset'), #コンパイルしたファイルのファイル名を指定。 filename: 'app.js' } }; |
設定ファイルの変更ができたら、改めて下記のコマンドを実行してみましょう。
|
1 |
node_modules/.bin/webpack |
今度は、ちゃんとファイルがコンパイルされると思います。
複数のJSファイルをコンパイルする方法について
複数のJSファイルをコンパイルする場合は、webpack設定ファイルの「entry」部分に配列形式で記述されればできます。
試しに「src/app2.js」というファイルを作成します。
ちなみに、中身は下記のような内容にしました。
|
1 |
alert("I'm app2.js"); |
ファイルが作成できたら、下記のように設定ファイルを書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 |
let webpack = require('webpack'); let path = require('path'); module.exports = { #配列形式で記述する。 entry: ['./src/app.js', './src/app2.js'], output: { path: path.resolve(__dirname, './asset'), filename: 'app.js' } }; |
あとは、下記のコマンドを実行してファイルをコンパイルします。
|
1 |
node_modules/.bin/webpack |
コンパイルしたファイルの中身を見てみると、下記のように表示されていると思います。
これで、ファイルが複数の場合も配列形式にすることで１つのファイルにまとめることができます。
まとめ
今回はwebpackのインストール方法と基本的な設定ファイルの書き方について紹介しました。
この記事が僕と同じようにwebpackの基本について知りたいと思ったあなたの役に立てれば嬉しいです。