Webpackのインプットメモ（gitコマンドのメモとかも）
環境構築
- インストールされたnodeを有効化
nodebrew use v7.1.0
- パスを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
なぜWebpackを使うか
静的ファイルをまとめることができる（js,css,png,imageなどたくさん）
- 静的ファイルがまとまっていないと何がいけないのか -1つのページを表すために依存しているリソースがたくさんあり、それぞれアクセスして取得しているためアクセス回数が増える。 それに比例してレスポンスタイムは伸びてしまう。
npmパッケージ
- live-server...（ファイルの変更が会った時）自動リロードする
npxコマンド：パスを指定しなくても実行ファイルを探して起動させられる - 例）npx 起動させたい実行ファイル
UNPKG（CDNが色々ある場所）lodash（結合するライブラリ？他にも用途あり？）- _.joinメソッドで結合できる
webpackでバンドルされた結果を出力する先
- distディレクトリ
lodashをnpmパッケージとしてインストール
npm info lodashで最新版を調べるnpm install --save lodash@4.17.15(2019/9/01時点）index.jsへインポート（
import _ from 'lodash'）インポートしたライブラリと自作のjsも結合される
webpackの設定を記述するファイル
webpack.config.js- モジュールをwebpackから使用するにはexportが必要で、それを記述する
エントリーポイントの設定
- 何をバンドルの対象とするかを記述する
- 例）entry: './src/index.js'
成果物（アウトプットの設定）
基本はmodeを指定してバンドルする
npx webpack --mode development
ローカルの作業ブランチをリモートブランチを作成しリモートへプッシュ
git push -u origin HEAD（-u オプションは多分無かったら作る）
カレントブランチをリモートの同名ブランチにプッシュするときは、以下コマンドでOK。
git push origin HEAD
masterブランチへのマージ
git merge --no-ff - -m 'merge branch into master'
webpack-dev-server
- オプション
- npx webpack-dev-server --open（ブラウザを自動で開く）
- configのscriptsに以下のように記述すると
npm run startで記述したコマンドが実行できる
- configのscriptsに以下のように記述すると
"scripts": {
"start": "webpack-dev-server --open
ミニファイ（min.)するとは余計なインデントを消して圧縮すること
モジュールとは
- 何かしらの処理をするjsファイル
- モジュールを他のファイルで実行できるようにするにはexport(エクスポート)しないといけない -export functionこのようにfunctionの前に書く
- 自作関数のimportは{}を使う
- exportは関数だけでなく変数も可能
defaultエクスポート
- インポート時に{}を書く必要がない
- インポート時に指定する名前は自由クラス名...意味がわからん。どうやって認識している？ファイル名？メソッド名？
style-loader(cssのスタイルを適用するために使用する)
loaderはwebpack.configに書かれている逆順に実行するためcss-loaderを最後に書かないとstyleが適用されない
url-loader→base64でDataURLとして出力する
file-loader→ファイル出力する
- 画像の場合は閾値を設定して超えたらfile-loaderの方がパフォーマンスは良い。ではurl-loaderはどこで使う？
ls -lh src/対象ファイル(KB表示をする)sass-loader...sassのstylesheetを取り込み
node-sass...sassからcssへ変換する
babelの導入理由
- トランスパイルする（正規化）...モダンな記法（ES6、ES7)をどのブラウザでも解釈できる形式に変換する。
- 例）`const arrow = arg => arg2;``を以下のように正規化する
var arrow = function arrow(arg) {
return arg2;
}
- babelの導入
- reactの文法を標準のシンタックスにトランスパイルする（Vueの場合はここを変える必要がある？）
- npm info @babel/preset-reactとnpm install --save-dev @babel/preset-react@7.0.0
- .babelrcの編集し以下のように編集
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
react,react-domの導入
- npm install react@16.9.0 react-dom@16.9.0
HTMLファイルの準備
- reactによるUIを埋め込むためのhtmlの雛形を利用するためにのローダー
- npm install --save-dev html-loader
- HTMLを生成するためのプラグイン
- npm install --save-dev html-webpack-plugin
- HTMLを利用できるようにwebpack.configに追加する
mini-css-extract-plugin
- cssが容量が大きくてファイルを分けたい時
production環境でconsole.logを自動削除する
- production環境での実行
launchのscriptを作成"launch": "webpack-dev-server --open --mode production"
- npm install --save-dev uglifyjs-webpack-plugin@2.2.0
- あとはREADMEを見てhttps://github.com/webpack-contrib/uglifyjs-webpack-plugin
- https://github.com/mishoo/UglifyJS2のdrop_consoleオプションが必要
- optimization(最適化)
- minimizer() 以下を追加
optimization: {
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
compress:{
drop_console: true
}
}
})],
}
cssを圧縮する
- optimize-css-assets-webpack-plugin
- MiniCssExtractPlugin
- webpack.config.jsのminimizerの要素へ追加で設定する。
- 飛ばすのでQiitaとかで。
source-mapでバンドル前後のエラーの追跡ができるようにする
- エラーが発生した時にバンドルする前のソースの状態で表示させることでエラーの調査をしやすくする
- eval-source-map
- https://qiita.com/pepo/items/beccd5f1e83ce2b93376←この辺のことかなー
- これも飛ばすのでQiitaとかで。
eslint-loaderでリアルタイムで静的解析(以下でrails + Vue + Webpackで説明している)
- https://qiita.com/daiki7nohe/items/3b752eff42ab7ba1eb4c
- 静的解析リンター
- jsで一番有名な静的解析ツール
- npm install --save-dev eslint@6.3.0
- npm install --save-dev eslint-loader@3.0.0
- eslint 初期化
- npx eslint --init
- .eslinttrcファイルを編集する
- webpack.config.jsを編集する(rule)
- トランスパイル前に配置しないといけない
- enforceという設定でloaderを実行する優先度を上げる
- `enforce: "pre"``
- babel-eslintでbabelによるトランスパイル前のチェックをするのに必要
- npm install --save-dev babel-eslint@10.0.3
- 取り込むための設定
- --fixをつけて実行するとエラーが自動で修正される時がある
