webpack
https://github.com/webpack/media/blob/master/logo/icon.png?raw=true
公式
webpackとはウェブコンテンツを構成するファイルをまとめてしまう(バンドル)ツール
Module Bundlers
機能ごとに分割されたファイルモジュール modulesをまとめる
ビルド
バンドルファイルを出力する一連の処理
一番多い使い方は、複数のJavaScriptを一つにまとめること
複数のJavaScriptをまとめるのは、いろんな利点があり
https://gyazo.com/8280a071ef3a4941c4126d8d14b253b5
なぜwebpack?
機能ごとにファイルを分割（モジュール化）する開発ができるから
自分が作成したモジュールだけではなく、外部モジュール（も利用できるから
リクエスト数を減らせるから
依存関係を解決したファイルを出力できるから
依存関係のファイルの読み込み順気にしなくていい
HttpRequestを減らせる
最適化したファイルを出力
注意点
webpack.config.js による設定
Plugin
ProvidePlugin
指定したモジュール modulesをファイル,モジュール modulesの変数として利用可能にする
ファイルごとにimportなど読み込む必要なしに
webpack-bundle-analyzer
バンドルに含まれているモジュール modulesやそれぞれのモジュール modulesのファイルサイズを確認できるプラグイン
clean-webpack-plugin
webpack実行時に、output.pathに指定したディレクトリ内の不要なファイルを削除するプラグイン
理由: 開発途中で、出力するファイル数やファイル名が変更され、output.pathに出力されたファイルの一部が不要になることがある
📁KiichiSugihara/webpack-plugin
babel-loader
困りごと
Module build failed (from ./node_modules/babel-loader/lib/index.js): · Issue #8599 · babel/babel
npm install -D @babel/core @babel/preset-env babel-loader @babel/preset-react
インストールし直し,node_modules消して、インストールし直しでいけた
環境変数
Mode
Production | webpack
1つのwebpack.config.jsでなく環境変数で分ける方がわかりやすい？
common,dev,prod
良記事
最新版で学ぶwebpack 4入門 – JavaScriptのモジュールバンドラ
本
✅webpack 実践入門
リンク
教育サービス
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack?
webpack 4 入門
Webpack チャンク最適 テクニック - Qiita