webpackがわからない〜
webpackのプラグインを使うとmoment.jsが軽くなるらしいが、webpackがわからない〜
ということで勉強します。
##webpackをダウンロード
###そもそもwebpackとは？
https://ics.media/entry/12140/
こちらでちょっと勉強しました。
ファイルやモジュールをまとめる（バンドルする）のが主な仕事のようです。
https://qiita.com/cheez921/items/266b1b4534b6111a9686
こちらを参考にインストール作業をします。
ダウンロードするにはnode.jsが必要です。
node.jをダウンロードした上で
npm init
をターミナルで入力し、聞かれた項目に答えて行きます。
（package.jsonについては割愛します）
$ npm install --save-dev webpack
そしてこのコマンドを入力して、現在のディレクトリにwebapckをダウンロードします。
するとnode_modulesという色々入ったフォルダとpackage-lock.jsonというファイルが生まれました。
先ほどの参考サイトの通りに以下のようにファイルを作成します。
webpack-demo
│ index.html
│ package.json
│ webpack.config.js
└─ src
─test.js
└─ node_modules
##webpack.config.jsって？
webpackの色々な設定ができるファイルになります。
>```javascript
const path = require('path');
module.exports = {
mode: 'development',
entry: "./src/test.js", //ビルドするファイル
output: {
path: path.join(__dirname, 'dist/js'), //ビルドしたファイルを吐き出す場所(絶対参照)
filename: 'bundle.js' //ビルドした後のファイル名
},
module: {
rules: [
//loader
]
}
};
こんな風にしましょうって書いてます。ムムム、どういう意味なんでしょうか。
https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3
https://qiita.com/soarflat/items/28bf799f7e0335b68186
この辺りを参考に。
mode・・・develop,production,nonの３つが指定できて、色々な設定が有効になる。
entry・・・ビルドを始める際の開始地点のjs
output・・・どこにどのように吐き出すのかの指定（path:どこに filename:どの名前で
rules・・・JavaScript以外を処理できるようにする処理（test:正規表現で拡張子を指定し、処理するファイルを定める。use:testで指定したファイルの依存関係などがbundleファイルに加えられるよう変換)
plugins・・・ファイルの最適化や環境変数の設定など、色々できる。
何となくここに書かれてるコードの意味がつかめました。
では実際にバンドルやってみましょう。
##バンドルするぞ！
export default function inu(){
console.log('わん');
};
export default function neko(){
console.log('にゃー');
};
import neko from './neko.js';
import inu from './inu.js';
neko();
inu();
inuとneko をtest.jsでよんでいます。
こいつをバンドルするぞ！
バンドルはターミナルでwebpackと打てばいいそうです。
あれ、command not foundになる...
調べると、webpack4からはwebpackコマンドを実行するにはwebpack-cliをインストールしないといけないようです。
npm install webpack-cli --save-dev //ダウンロード
export PATH=$PATH:./node_modules/.bin //パスを通す
改めてwebpackのコマンドを入力すると...ちゃんとバンドルできました！