コンテンツにスキップ

1. 基本的なバンドル

最終更新日: 2021-11-08

Webpack とはなんぞやというところで軽く調べてみたメモ ほぼ公式のチュートリアル やれることが非常に多いので公式ドキュメントを読むのが一番良い

確認環境

Env ver
webpack 5.41.0
webpack-cli 4.7.2

Webpack とは

JavaScript のモジュールバンドラで次の機能を持つ

  • JS や CSS、画像ファイルやデータファイルなどの各種静的ファイルを出力フォルダにまとめて吐く
  • ブラウザのキャッシュの影響を回避するために、出力ファイル名を毎回変える
  • index.html に必要なファイル参照を自動で埋め込む
  • 出力フォルダのクリーンアップ
  • HMR 用のサーバーを起動する
  • Sourcemap を吐く
  • 次の構成を利用したビルドパイプラインを構成する
    • TypeScript, CoffeeScript, Babel and JSX
  • その他色々
    • 豊富な API と設定が存在するのでいろんな事ができる!

webpack を試してみる

取り敢えずこんな感じのプロジェクトを作る

  1. npm init
  2. npm i -D webpack webpack-cli lodash
1
2
3
4
5
|- package.json
|- /dist
|- index.html
|- /src
  |- index.js

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <script src="dist/main.js"></script>
  </body>
</html>

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import _ from 'lodash';

function component() {
  const div = document.createElement('div');
  div.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return div;
}

document.body.appendChild(component());

npx webpack を流してバンドルしてあげると lodash が組み込まれた JS が吐き出される

CSS のバンドル

  1. npm i -D style-loader css-loader を流して
  2. webpack.config.jssrc/index.css を作成
  3. src/index.js もちょっと書き換えます

webpack.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const path = require('path');

module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

src/index.css

1
2
3
.hello {
  color: red;
}

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import _ from 'lodash';
+import './index.css';

function component() {
  const div = document.createElement('div');
  div.innerHTML = _.join(['Hello', 'webpack'], ' ');
+  div.classList.add('hello');

  return div;
}

document.body.appendChild(component());

この状態で npx webpack を流すと CSS のバンドルが確認出来る

assets のバンドル

webpack.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');

module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
    ],
  },
};

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import _ from 'lodash';
import './index.css';
+import Icon from './icon.png';

function component() {
  const div = document.createElement('div');
  div.innerHTML = _.join(['Hello', 'webpack'], ' ');
  div.classList.add('hello');

+  const img = document.createElement('img');
+  img.src = Icon;
+  div.appendChild(img);

  return div;
}

document.body.appendChild(component());

フォントファイルやデータファイルのバンドル

基本は同じなので公式のガイドを見るとわかりやすい