webpackをさっと学ぶ

#はじめに
なんとなくどんなものか分かってたけどよくわかんないからエラー出た時に調べてなんとかしてたwebpackをちゃんと学ぼうと下の動画を購入して勉強しました。

webpack最速入門 ~実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ~

#webpackとは
フロントエンド用のモジュールバンドラーです。
モジュールはJSファイルとかCSSファイル、バンドラーはまとめるものって意味なので、要はJSファイルとかCSSファイルとか複数ファイルに跨ってるものを一つのファイルにしちゃうっていうやつです。
#webpackのメリット
一つのファイルにまとめる時に、無駄な改行とかスペースを削除したりしてファイルサイズを圧縮してくれるのでファイルの読み込み時間が少なくて済みます。

また、JSファイルがたくさんあると、読み込み順を意識してHTMLに記述する必要があるのですが一つのファイルにしてその辺の名前解決を勝手にやってくれるので、分割したファイルで普通に実装していって最終的に良い感じにまとめたファイルを作ってくれるっていうのがwebpackの良いところですね。

#使い方
webpackのドキュメント通りに進めていきます。
ただし、インストールやファイルの作成部分は割愛して、webpackの設定から説明していきます。

まずはwebpackの設定ファイルを作成します。

webpack.config.js

const path = require('path'); // pathを色々いじれるモジュール

module.exports = {
  entry: './src/index.js', // エントリーポイント（最初に読み込むjsファイル。ここにimportとか記述されていて、それを順次読み込む）
  output: {
    filename: 'main.js', // 出力ファイル名
    path: path.resolve(__dirname, 'dist'), // 出力先パス
  },
};

これでビルドすればバンドルされたjsファイルが出力先パスに作成されます。

./src/index.jsは次のようなファイルになります。

import _ from 'lodash';

 function component() {
   const element = document.createElement('div');
 
  // Lodash, currently included via a script, is required for this line to work
  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
 
   return element;
 }
 
 document.body.appendChild(component());

ここではlodashという外部モジュールと自分で定義しているjsをまとめている訳です。

CSSもバンドル

次にCSSもまとめてしまいます。

jsファイル内でcssを扱うためにcss-loader、style-loaderをインストールします。
その後、先ほど作成したwebpack.config.jsを以下のように編集します。

webpack.config.js

const path = require('path');
 
 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
  module: {
    rules: [
      {
        test: /\.css$/i, // 処理対象ファイルを正規表現で指定する。
        use: ['style-loader', 'css-loader'], // 使用するローダー（さっきインストールしたもの）
      },
    ],
  },
 };

先ほどのjsコンポーネントにcssを追加します。

 import _ from 'lodash';
import './style.css'; // 追加
 
 function component() {
   const element = document.createElement('div');
 
   // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello'); // 追加
 
   return element;
 }
 
 document.body.appendChild(component());

このような感じで同様に画像や、jsonファイルなどをバンドルできます。

Babelを導入

Babelも追加できます。（webpackのドキュメント）

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        }
      }
    }
  ]
}

optionsの部分は外部ファイル（babel.config.js）に記述することもできます。

#まとめ
因みにこちらの動画で一番最初に学んだのはwebpackのイントーネーションでした。
ウェ→ブ→パック→と読んでいたんですが、動画中ではウェ↑ブ↓パック→って読まれていました。
でも調べると普通にウェ→ブ→パック→と読まれてる人もいるのでどっちでも良いと思いました笑

流れさえわかれば細かい設定は各種ローダーのドキュメントを見るなりすればできるようになるかなって感じです。