webpack.config.js の環境構築の際インストールするモジュールのメモ

2022年5月10日

参考

nodejs と npm をインストール

apt update
apt install nodejs
apt install npm

package.json を初期化

frontend 配下にプロジェクトを作成する例。

mkdir frontend
cd frontend/
npm init -y
npm install --save vue

webpack と vue その関連モジュールをインストール

webpack とその関連モジュールをインストールする。

npm install --save-dev vue webpack webpack-cli webpack-dev-server

vue とその関連モジュールをインストールする。

npm install vue-loader
  • vue-loader
    • vueファイルに記述したtemplate, script, styleタグの中身を解析し、ブラウザに認識できる形に変換する。
npm install --save-dev vue-template-compiler
  • vue-template-compiler
    • vue のテンプレートのコンパイラ。
npm install --save-dev vue-style-loader css-loader
  • css-loader
    • ファイルからcssの情報を取り出してJavaScriptファイルに組み込む。
  • vue-style-loader
    • htmlファイルのタグの中に設定したclass情報を含むstyleタグを埋め込む処理を行う。
npm install --save-dev babel-loader @babel/core
  • @babel/core
    • ES6(ECMAScript2015)から使えるようになったアロー関数などの記述方法をサポートしていないブラウザに対応できるようにコード変換を行ってくれるトランスパイラ。
  • babel-loader
    • webpackでBabelを利用するためのLoader。

2022年5月10日