【JavaScript修行】初めてのwebpack4 #JavaScript

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の色々な設定ができるファイルになります。

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・・・ファイルの最適化や環境変数の設定など、色々できる。

何となくここに書かれてるコードの意味がつかめました。
では実際にバンドルやってみましょう。

バンドルするぞ！

inu.js

export default function inu(){
    console.log('わん');
};

neko.js

export default function neko(){
    console.log('にゃー');
};

test.js

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のコマンドを入力すると...ちゃんとバンドルできました！