BETA

webpackを導入してフロントエンド開発を便利にする

投稿日:2020-06-23
最終更新:2020-06-27

webpack

webpackはNode.js上で動くバンドルツールで、複数の.jsファイルを1つの.jsファイルとして出力してくれます。
基本的に1つのjsファイルにまとまるので、どんどんJavaScriptで機能追加をしても読み込む側のHTMLの編集が不要。
また、バンドル(まとめる)する段階で構文エラー等も指摘してくれるようになり開発がとても楽になります。

更に機能を追加する事で様々な処理が行えます。

  • 簡易Webサーバー機能
    • ファイル更新でオートリロード
    • SSL接続
  • SCSS/SASS等のコンパイル
  • JavaScriptの拡張言語TypeScript等もサポート

機能は好みやプロジェクトによって追加する事が可能です。

とにかくフロントエンド制作が

  • 簡単に
  • 快適に
  • 便利に

それがwebpackです。

前提環境

webpackのインストールにはNode.jsとnpmが必要になります。
yarnでも利用できますが、今回はnpmを前提に解説します。

$ node -v  
v12.18.1  

$ npm -v  
v6.14.5  

バージョン情報が返ってこない場合Node.jsがインストールされていない可能性があります。
以下の記事でNode.jsの導入を解説しているので、まずはNode.jsをインストールしておいて下さい。

[Windows]Node.jsをバージョン管理システムNodistで環境構築する
[Mac]Node.jsをバージョン管理システムnodebrewで環境構築する

また、本記事の一部のコマンドはWindowsでは使えないものがあります。
適宜読み替えて頂きますようお願い致します。

インストール

早速webpackのインストールをしていきます。
webpackは通常、プロジェクトフォルダの中でNode.jsのpackege.jsonを作ってインストール/管理します。
今回は以下のようなディレクトリ構造で解説します。

webpackProject

  • /dist
    • index.html
    • /js
      • bundle.js
  • /src
    • index.js
    • /js
      • taxCalc.js
  • package-lock.json
  • package.json
  • webpack.config.js

プロジェクトの場所はわかりやすくデスクトップ直下としておきます、適宜読み替えて下さい。
CUIでデスクトップに移動し、webpackProjectディレクトリを作成します。

$ cd desktop  

$ mkdir webpackProject  

$ cd webpackProject  

ついでに必要なディレクトリも作成してしまいましょう、distディレクトリとsrcディレクトリです。
distは公開ディレクトリ、最終的にこのdistディレクトリの中をサーバーにアップロードすることになります。
ちなみにdistはdistributionの略で、コンピューターの世界ではソフトウェアやWebページを配布(公開する)みたいな意味になります。
ディレクトリ名は他にもpublic等覚えやすいものでOKです。

srcはsourceの略で、情報源みたいな意味です。
つまりdistディレクトリに出力される前の元という事ですね。
ここには主にjsファイルをおいておきます。

$ mkdir dist src  

次にpackage.jsonを作成します。

$ npm init -y  

$ ls  
package.json  

最後にwebpackをインストールします。

$ npm i -D webpack webpack-cli  

webpackは本体、webpack-cliはwebpackコマンドを使う時に必要になります。

$ npx webpack -v  
4.43.0  
$ npx webpack-cli -v  
3.3.12  

バージョンが返ってくればOKです。

webpack.config.jsの作成

webpackの設定はwebpack.config.jsに記述します。

viやvimで作成するか、VSCodeやatom等使い慣れたエディタで作成して下さい。
必ずpackage.jsonと同じ階層に作成しましょう。

$ vi webpack.config.js  

以下のように作成します。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  

    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    }  
};  

とりあえずこれが最低限の設定です。
entryとoutput{path}は省略可能で、entryを省略した場合デフォルトでsrc/index.jsになります。
つまり今回のケースでは省略しちゃってもOK。
output{path}は省略するとdistディレクトリが出力場所になります。
今回はdist/jsに出力するので省略する事はできません。

ついでにdistディレクトリ配下にjsディレクトリを作成しておきます。

$ mkdir dist/js  

テストファイルの作成

それではsrcディレクトリ直下にindex.jsを作成します。
このindex.jsはエントリーポイントと呼ばれ、バンドルするファイルは基本的に全てこのindex.jsにまとめられ最終的にdist/jsにbundle.jsとして出力されます。

今回は後ほど作成するtaxCalcに数字を投げると消費税10%を加算して表示する簡単なプログラムを書いてみます。

$ vi src/index.js  

以下のように作成します。

import { taxCalc } from './js/taxCalc.js'  

alert(taxCalc(500));  

index.jsはjsディレクトリのtaxCalc.jsを読み込んでimportしたtaxCalcに500を投げてアラートを出すだけです。

続いてsrc/jsディレクトリにtaxCalc.jsを作成しましょう。

//jsディレクトリ作成  
$ mkdir src/js  

$ vi src/js/taxCalc.js  

以下のように作成します。

const TAX_RATE= 1.1;  

export function taxCalc(int) {  
    return(int * TAX_RATE);  
}  

受け取ったintにTAX_RATEの1.1(10%)を乗算して返しているだけです。
本来は四捨五入したり、もっと簡易な関数の書き方がありますがここではベーシックに記述しています。

最後に表示する為のindex.htmlを作成します。

$ vi dist/index.html  

以下のように作成します。

<!DOCTYPE html>  
<html lang="ja">  
    <head>  
        <title>webpacktest</title>  
    </head>  
    <body>  
        <p>webpackのテスト</p>  
        <script src="js/bundle.js></script>  
    </body>  
</html>  

これで準備ができました!

バンドル

では実際にバンドルしてみましょう。

$ npx webpack  

※今回は必要最低限の解説の為省いていますが、本来はmodeを指定する必要があります。modeを指定していないので警告が表示されますが、一旦無視して下さい。
バンドルに成功すると、dist/js配下にbundle.jsが作成されます。
index.htmlをブラウザで開いてアラートが表示されれば無事バンドル成功、おめでとうございます!

ここから更にwebpackを便利に使う設定を行いますが、まずはここまでで複数のjsファイルをバンドルすることに成功しました。
webpackの詳しい設定については別途解説予定です。

webpackコマンド

webpackは通常webpack.config.jsに設定を記述し、目的に応じたコマンドを作成して使うためあまりwebpackそのもののコマンドは使用しません。
以下は代表的なコマンドです。

ビルド実行

$ npm run webpack  
$ npx webpack  

バージョン

$ npx webpack -v  
$ npw webpack --version  
4.43.0  

ヘルプ

$ npx webpack -h  
$ npx webpack --help  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@braveryk7の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう