Webpackの導入と動作確認

webpack

やること

webpackを導入しつつ、実際にwebpackを使って
複数のソースコードを１つのファイルにバンドルしてみる。

実行環境

  • node v10.10.0
  • yarn 1.22.0

最終的なディレクトリの中見

root
 ┣ node_modules
 ┣ public
 ┃ ┣ index.html
 ┃ ┗ js
 ┃   ┗ bundle.js
 ┣ src
 ┃ ┣ app.js
 ┃ ┗ modules
 ┃   ┣ hello.js
 ┃   ┗ world.js
 ┣ package.json
 ┣ webpack.config.js
 ┗ yarn.lock

1. package.jsonを作る

適当なディレクトリを作成し、そのディレクトリ内で以下のコマンドを実行する。

yarn init -y

2. webpackとwebpack-cliを入れる

yarn add -D webpack webpack-cli

3. webpackの設定ファイル(webpack.config.js)を作成する。

webpack.config.jsというファイルを作成する。

const path = require('path');

module.exports = {
  // webpackのモードを指定する(development、production、noneの３種類)
  mode: 'development',

  // エントリーポイントになるファイルを指定
  entry: './src/app.js',

  // 出力に関する設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のディレクトリパス
    path: path.resolve(__dirname, 'public/js')
  }
}

4. package.jsonにscriptsを追加

  "scripts":{
    "build":"webpack"
  },

webpackはwebpackというコマンドで実行できる。
これでwebpackでバンドルする準備は整った。

5. 適当にソースコードを追加する

root/src/modules配下にhello.jsとworld.jsを作成

hello.js

export default function hello() {
  return "hello"
}

world.js

export default function world() {
  return "world";
}

6. app.js(エントリーポイント)ファイルを作成する

root/src直下にapp.jsを作成

import hello from './modules/hello';
import world from './modules/world';

const text = hello() + world();

document.body.innerText = text;

7. バンドルする

ターミナルにてyarn buildとすると、root/public/js/bundle.jsが作成される。

ここで出力されるのはwebpackによってバンドルされたファイル。
出力先やファイル名はwebpack.config.jsで指定した通りになる。

作成されたbundle.jsを適当なHTMLファイルから読み込んでブラウザで実行すると
helloworldと表示される。

8. 終わり

ひとまず「webpackを使って複数のjsファイルを１つのファイルにバンドルする」という
基本中の黄本はこれにて完了。

実際にbundleされたファイルを覗いてみると
自分が書いたコードはただの文字列として羅列されている。

本当に１つのファイルにコードを全部まとめてしまっていて
この文字列をjavascriptのeval関数で再評価する処理になっている。

またwebpackによって__webpack_require__という関数が定義されていて
この関数によってうまいこと外部ファイル読み込みの動作を実現している。