webpack 入門 全体像をみるためのちょっとしたおさらい

前回に引き続き webpack 入門です。

今回はこれまでのおさらいも兼ねて全体像をみたいと思います。

webpack は、フロントエンドで必要なファイルの依存関係をみて、それらをバンドルしてくれるツールです。

今回の記事で特に言いたいことは、実際に使う時は、webpack でバンドルされたファイルを index.html で読み込むようにする、ということだけです。

必要なjsファイル

src/app.js は src/helper.js を使っているので、依存しています。

これらの二つのjsファイルをバンドルし、それを dist ディレクトリ配下に main.js として出力します。

バンドルされたjsファイルを読み込む index.html

index.html では dist/main.js を読み込むようにします。

各ファイルの内容

各ファイルの内容は以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>webpackのテスト</title>
</head>
<body>
    <h1>webpackのテストです</h1>
    <button id="my-btn">ボタン</button>
    <script src="../dist/main.js"></script>
</body>
</html>
const helper = require('./helper');

const myBtn = document.getElementById("my-btn");
myBtn.addEventListener("click", () => alert(helper.hoge()));

function hoge(){
  return 'hoge';
}

module.exports = {
  hoge
};

web サーバーでは、src/index.html を公開するとします。(本来であれば src 配下を公開することはありません)

動作確認

ブラウザでアクセスするとボタンが表示されるので、それをクリックするとアラートが表示されればOKです。

なんとなく webpack の用途がわかれば幸いです。

JavaScript, webpack

Posted by たみぼうず