webpackインストール後のセットアップパターンまとめ。Babel/ESLint/SASSなどを用いてフロントエンド開発環境を整えるホームwebpackwebpackインストール後のセットアップパターンまとめ。Babel/ESLint/SASSなどを用いてフロントエンド開発環境を整えるwebpackインストール後のセットアップパターンまとめ。BookmarkLINEwebpackを用いたフロントエンド開発環境構築webpackインストールwebpackセットアップwebpackを用いたフロントエンド開発環境構築を行います。環境やインストールについては前回の記事を参考にしてください。動作確認CSSを出力する複数のCSSファイルをバンドルするCSSファイルをminifyするSASSファイルをコンパイルする画像をbase64エンコードでバンドルする最小構成のビルドまずはwebpackを使って最小のビルドを行ってみます。プロジェクトルート以下にJSファイルとHTMLファイルを作成します。構成は以下の通りです。webpack.config.js黄色の字の部分のファイルを作成していきます。htdocsディレクトリ以下には、公開ソースを設置していきます。src="js/app.js"></script></body></html>HTMLファイルには、最少部分のみを記述しています。未作成でもOK、もしくは空っぽのJSファイルを作成しておきます。assetsディレクトリ以下には開発ソースを設置していきます。webpack!!');アラートを表示させるスクリプトのみを記述しています。このファイルでwebpackの動作設定を行います。}};上から解説します。モジュールを読み込みます。Pathモジュールは、ファイルパスについての操作をいい感じに行ってくれるNode.jsの標準モジュールです。}};webpackの設定をここで行います。webpack4からはmodeプロパティが登場し、実行時に引数を渡さない場合はここの設定は必須になっています。設定値は以下の3つです。productiondevelopmentnone尚、未設定の場合はproduction扱いとなり、警告が表示されます。entryプロパティでは、エントリポイントを指定します。エントリポイントは、ビルドを行う基となるファイルを指定します。ここで指定したJSファイルから派生するJSファイル群(など)を1つのファイルへバンドルされる事になります。outputプロパティでは、出力先ファイルに関する設定を行います。filenameプロパティにはファイル名、pathプロパティにはファイルまでのパスを指定します。pathプロパティでは、先頭で読み込んだpathモジュールを用い、join()メソッドで「プロジェクトルートまでのパス」と「プロジェクトルートから公開ファイルまでのパス」を連結しています。scriptプロパティに以下を追記して、webpackコマンドを登録しておきます。production"},これで設定は完了です。コンソールからプロジェクトルートへ移動し、ビルドを行ってみます。ブラウザからアクセスして動作を確認してみます。webpackでJSファイルのビルドが行われ、app.jsに出力されるまでを確認できました。トランスコンパイラを用いたコンパイル&複数ファイルのバンドル次は、ES6(ES2015)で記述したJSのコンパイルと、複数のファイルをビルド(バンドル)してみます。BabelのインストールES6等を扱う為にトランスコンパイラであるBabelをインストールします。以下の設定を追加します。}};moduleプロパティ部分が追加した部分です。設定は済んだので、次はコンパイルを行うJSファイルを用意します。今回はES6での記法で且つ複数ファイルを扱うので、assetsディレクトリ以下をこんな構成にして単純な四則演算を行うスクリプトを作成していきます。index.jsそれぞれを実装していきます。実行されると、コンソールに結果を表示するようにします。'./Controller/calculationController';動作確認それではwebpackでコンパイル&ビルドを実行します。[built]ブラウザからアクセスして動作確認を行います。ES6記法がBabelによってトランスコンパイルされ、実行可能なソースコードへ変換された事と、複数のJSファイルがapp.jsへ集約された事が確認できました。コードテスト(静的コード解析)webpackでは、テストも同時に回す事が出来ます。コンパイル&ビルドを行うのと同時にテストも回す事で、スクリプトの信頼性も高まります。今回はESLintを導入して静的コード解析を行います。ESLintのインストールコードテストを回す為にESLintをインストールします。vulnerabilitieswebpack.config.jsの設定インストールが完了したら、webpack実行時に静的コード解析を行うように設定ファイルに以下を追記します。}};.ESLintrcの作成ESLintの解析ルールを設定する為に、プロジェクトルートに.eslintrc(ESLintの設定ファイル)を作成し、以下を記述します。extendsプロパティです。指定する事で、ESLintが推奨するテスト項目が既に設定されます。具体的にどんなチェック項目があるのかは、以下から確認できます。https://eslint.org/docs/rules/とはいえもちろん、個別に指定する事も可能です。rulesプロパティに指定していきます。今回は、推奨設定に入っていない「セミコロン忘れ」を追加し、さらに、いちいちエラーにされると辛いconsole出力メソッドと不使用変数のエラーレベルを引き下げています。semiエラーに設定ASI(自動セミコロン挿入)の使用を禁止とし、セミコロン忘れをチェックします。警告に設定consoleの使用を許可しない。console.log()などがソースコードに残っていないかをチェックします。未使用の変数を許可しない。宣言・定義されているがその後、使用されていない変数がないかをチェックします。ルールや指定できる項目は沢山あるので、以下で確認してください。ESLinthttps://eslint.org/docs/user-guide/configuring動作確認それではwebpackでコンパイルと同時に静的コード解析を実行します。devすると、以下のようなメッセージが出力されます。出力しているので、その部分で警告が出ています。これらを除去すれば、警告は表示されなくなります。このようにして、webpackでコンパイルを行うのと同時にインデントとスペースの混合やコンソールメソッドなど、指定したルールの基でコードテストを実行する事が出来ます。CSSを出力するwebpackではJavaScriptだけでなくCSSも扱う事が出来ます。複数のCSSファイルをバンドルする複数に分けたCSSファイルを1つにまとめて出力します。JSファイルとCSSファイルは別々に出力する形で行います。CSSファイルを作成し、styleを記述していきます。assetsディレクトリ配下にcssディレクトリを作成し、その配下に以下3つのCSSファイルを作成します。"style_b.css";次に、CSSの解釈に必要な「css-loader」と、CSSとして切り出す為に「mini-css-extract-plugin」をインストールします。