webpack4を学んでみた

はじめに

自身のメモをせっかくなので、アウトプットしようと思い投稿。
間違いなどがございましたら、ご指摘いただけると助かります。

職場でwebpackに触れることになり、webpack怖い病を克服すべく.....
さぁ、いざいかん!!
(随時更新予定)

webpackとは

A. モジュールバンドラ（複数のファイルをまとめる）

モジュール： JavaScript,scssや画像などを部品（モジュール）として扱う
バンドル： モジュールを1つのファイルにまとめたファイル

ファイルをまとめると、なにが嬉しいのか

A. ページの読み込む速度が速くなる

もう少し詳しく言うと.....
webページを構成する複数のモジュールを、1つのファイルにバンドルすることで
ファイルのリクエスト数が減り、ページの読み込む速度が向上します。

webpack導入方法

####1.package.jsonの生成

npm init -y 　　//-yを入力することでyesを省略することができます

####2.webpackの導入

npm i -D webpack webpack-cli 　　//npm install --save-dev 略

グローバルではなくローカルにインストールすることで、プロジェクト内のみの影響にとどめます。
また、ローカルにインストールすると共同開発時も、バージョンを揃えて利用し、環境差異を最小化することができます。
※webpack4からwebpack-cliが必要になりました。

これで以下のようなディレクトリ構造になります。

├── package-lock.json
├── package.json
└── node_modules

####3.エイリアス（ショートカット）を貼る

以下のようにscriptsに書くことで、
webpackというビルドコマンドをbuildに置き換えることが可能になります。

package.json

一部省略
{
  "scripts": {
    "build": "webpack"
  },
"devDependencies": {       //ここにインストールしたものが記載されます
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }

これによりnpx webpack から npm run buildというコマンドでビルドできます。

####4.srcディレクトリを作成し、index.js,hoge.jsを作る
中身はよしなにどぞ....

####5.npm run buildする!!

.
├── dist
│   └── main.js
├── package-lock.json
├── package.json
├── src
    ├── index.js
    └── hoge.js

distディレクトリの中にmain.jsがバンドルされました!

webpackでつまづいた箇所

ビルドができない

ERROR in Entry module not found: Error: Can't resolve '/src/index.js' in '/Users/hoge~'

webpack.config.js

const path = require('path');

module.exports = {
	mode: 'development',
	entry: '/src/index.js',
	output: {
		path: path.join(__dirname, '/dist'),
		filename: 'main.js'
	},
};

原因はwebpack.config.jsのエントリーポイントをentry: '/src/index.js'と記載したためでした。
正しくはentry: './src/index.js'とカレントディレクトリ表記を含めた指定が必要となります。

参照：https://nodejs.org/api/modules.html#modules_all_together

また、
エントリーポイントの指定がない場合
設定ファイルであるwebpack.config.jsなしの場合
にビルドするとデフォルトでsrc/index.jsを探しにいきます。
※webpack4からwebpack.config.jsがなくても、ビルドできる仕様になったみたいです。

逆に上記２つの場合にsrc/index.jsがないと
module not found: Error: Can't resolve '.src/' in '/Users/hoge/~とエラーになりますのでご注意。

参考

可視化されていて理解が深まる秀逸スライド　→　なぜ初心者は webpackが解らないのか？
こちらの手順を参考にさせていただきました　→　最新版で学ぶwebpack 4入門
Node.js All together