webpack4を学んでみた #JavaScript

はじめに

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

職場で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

webpack4を学んでみた