1. yuu3

    Posted

    yuu3
Changes in title
+Webpackを理解する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,80 @@
+この記事は[OthloTech Advent Calendar 2019](https://qiita.com/advent-calendar/2019/othlotech)の23日目の記事です。
+
+記事の担当は名古屋の某専門学生の[@yuu3](https://qiita.com/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](https://webpack.js.org/concepts)より引用
+
+**・モジュールバンドラーとは**
+モジュールをまとめて1つ以上のファイルを出力するツールのこと。Webpack以外だとBrowserifyやRequireJSなどが挙げられます。最近だとFuseBoxというのがあるらしいです。
+
+https://fuse-box.org/
+
+###2. なぜWebpackを理解するのか
+昨今のフロントエンド開発においてモジュール化はほぼ必須と言っていいでしょう。index.htmlにscriptをいくつも記述をすると後々のメンテナンスが大変になったりパフォーマンスが低下するのは目に見えてます。そこでコードをモジュール化してメンテナンスしやすく、かつ可読性をあげるということでもWebpackを理解するのはとてもいいことです。
+
+###3. webpack.config.jsの設定
+
+```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でビルドした速度
+<img width="231" alt="スクリーンショット 2019-12-10 12.01.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240035/e5da6e16-4974-23a8-4279-508481ca160f.png">
+productionでビルドした速度
+<img width="235" alt="スクリーンショット 2019-12-10 12.03.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240035/cbea682b-54b3-ca38-c60c-1d0355ff6527.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のアドベントカレンダーに参加しました。こういうアウトプットの場に気軽に参加できるのはとても嬉しいです。
+正直あまり時間をかけれなかったので少しずつ更新していきます。
+
+
+
+