Webpack
目的は、
webpack.config.jsを読めるようにする。
Entry,
webpackがビルドを始める際の開始点となるjsファイル
Output
bundleファイル...どのような名前で..
path, filenameで指定
Loaders
moduleで指定....そういうことだったのか...
rules(複数指定のためのもの?)があって、
propertyがある。
test
対象ファイルパターン
use
loader, options.presets..
Plugins:
いろいろ拡張をする
自分のまとめ文。
ウェブフロントエンドの開発で、js, css, fonts, json,,,などの読み込みを bundle化(一本化する)
ブラウザは、htmlを呼んだ際に、一本化されたファイルを読める。必要なものをまとめて読める。
おおきなサイズ,小さなサイズ(多リクエスト)のものを切り出すことも可能。module:rules:extractTextPlugin.extract, urlLoader
開発する側は、いろいろ分けて、開発しておいて、最後に bundler(build)すればよい。これも自動化や差分実行する。
Tutorial:
参考
自分のprojectでは、5をつかっていた。
bundler your ....
以下のconcept、その設定が、webpack.config.jsに書かれる。
to understand its Core Concepts.
Entry,
which module webpack should use to begin
Output,
where to emit the bundles it creates and how to name
Loaders
リソースのタイプごとにloadタイプを設定する。；
CSS, SASS, JSX, などを処理してくれる。jsだけでなく。
to process other types of files and convert them into valid modules
loaders have two properties. test, use
Plugins,
extra.
while loadera are .. perform a wider range of tasks
Mode(development | production | none), Browser Compatibility(..)
https://gyazo.com/3a493a6ace65ff30aaa9141d5dc94d69
whitebooardのもの
上記を読みながら。
https://gyazo.com/ff49ff8021196e1a6fc86b7e0fbb47ee
introduction
依存性の解決、リクエスト回数を抑える、大規模な開発用
module Bundlerの基本
モジュール(ファイル)の書き方
定義したclassをexportして、jsファイル側でimportする
設定ファイルの基本
webpack.config.js
ローダー
プラグイン