Help us understand the problem. What is going on with this article?

Webpackを理解する

この記事はOthloTech Advent Calendar 2019の23日目の記事です。

記事の担当は名古屋の某専門学生の@yuu3です。
最近はTypeScriptに苦しめられています。

1. 概要

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

webpackのコアは、最新のJavaScriptアプリケーション用の静的モジュールバンドラーです。webpackがアプリケーションを処理するとき、プロジェクトが必要とするすべてのモジュールをマップし、1つ以上のバンドルを生成する依存関係グラフを内部で構築します。

https://webpack.js.org/conceptsより引用

・モジュールバンドラーとは
モジュールをまとめて1つ以上のファイルを出力するツールのこと。Webpack以外だとBrowserifyやRequireJSなどが挙げられます。最近だとFuseBoxというのがあるらしいです。

https://fuse-box.org/

2. なぜWebpackを理解するのか

昨今のフロントエンド開発においてモジュール化はほぼ必須と言っていいでしょう。index.htmlにscriptをいくつも記述をすると後々のメンテナンスが大変になったりパフォーマンスが低下するのは目に見えてます。そこでコードをモジュール化してメンテナンスしやすく、かつ可読性をあげるということでもWebpackを理解するのはとてもいいことです。

3. webpack.config.jsの設定

webpack.config.js
const path = requier('path')

module.exports = {
  mode: 'development',
  context: path.resolve(__dirname, './src'),
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
    ]
  }
}

mode

指定できる値はdevelopment,production,noneの3つです。
developmentは開発用、productionは本番用。
Webpack4系以降はmodeを指定しないとproductionでビルドされます。

devlopmentでビルドした速度
スクリーンショット 2019-12-10 12.01.58.png
productionでビルドした速度
スクリーンショット 2019-12-10 12.03.05.png
前回のビルドのキャッシュを読み込んでいるのでそれなりの速度は出ていますがやはりproductionでビルドするとdevelopmentよりビルドに時間がかかってしまいます。
modeをその都度切り替えるのは面倒なのでNODE_ENVを使ってpackage.jsonに記述したscript毎にmodeを切り替えるのがスマートです。

context

ビルドするファイルが存在するディレクトリを指定する。

entry

ビルド対象となるエントリーファイルを指定する。
ここで指定されているappはchunk(分割した塊)で後述のoutputの項でも説明する。
指定しない場合は./src/index.jsをビルドして./dist/main.jsを出力される。

output

ビルドしたファイルの出力先を指定する。
filenameで指定している[name]というのはentryのchunk名がここに入ることになる。なので先ほどのサンプルコードでビルドするとapp.jsというファイル名で出力されることになる。
またpathではディレクトリを記述する。基本的にはdistディレクトリを指定する。

loader

ここではJavascriptやそれ以外のものを使用出来るように変換するための設定を記述します。
testは正規表現でどの種類のファイルを変換するのかを、useでは使用するloaderを指定します。

4. まとめ

フロントエンドの開発はこれからも複雑化していくと思っています。なのでこういったツールの基礎をしっかりと学習して対応していく必要があると思います。
最近少しparcelを使ってみようかなと思い始めました。configをあまり書かなくて楽そうですがまだしばらくはWebpackの流れかなって感じがします。

今回は自分のWebpackの理解度としてどのくらい言語化できるのかでOthloTechのアドベントカレンダーに参加しました。こういうアウトプットの場に気軽に参加できるのはとても嬉しいです。
正直あまり時間をかけれなかったので少しずつ更新していきます。

yuu3
フロントエンドエンジニア目指してま
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした