webpack (webpack-cli) を最小限で使ってみる

前提条件

  • npmyarn のコマンドが使える必要があります
  • ターミナルの操作が行える必要があります
  • HTML や JavaScript の基礎を知っている必要があります

結論

以下のようにしましょう。

1. webpack と webpack-cli をインストールする

webpackwebpack-cli をインストールします*1

$ npm install webpack webpack-cli

2. 例として、jQuery を npm でインストールする

webpack を用いてバンドルするパッケージの例として、jQuery をインストールします。

$ npm install jquery

3. jQuery のコードを src/index.js に書く

まっさらな webpack*2 が見に行くエントリーポイントは src/index.js になります。なのでこのファイルを作ってあげます。

src/index.js には次の内容を書きましょう。

const $ = require('jquery');

$(function() {
  $('#my-button').on('click', function () {
    alert('Hello, webpack World!');
  });
});

4. HTML ファイルを書く

以下のような HTML ファイルを書きます。ファイル名は index.html とします。置き場所はプロジェクトの直下です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>
    Hello, webpack World!
  </title>
</head>

<body>
  <button id="my-button">押して下さい!</button>
  <script src="./dist/main.js"></script>
</body>
</html>

<script> タグで読み込んでいる場所に注目してください。dist/main.js となっています。これは、まっさらな webpack*3 がバンドルしたファイルを書き出す場所になります。

5. webpack を実行する

ここまでできたら webpack を実行しましょう。実行後は dist/main.js が生成されています。

$ npx webpack
Hash: 337aef3342c03cd4003b
Version: webpack 4.41.5
Time: 2240ms
Built at: 2020/01/05 23:28:13
  Asset      Size  Chunks             Chunk Names
main.js  87.6 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 136 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in configuration が出ていますが、こちらの意味や解決方法は調べてみて下さい*4

6. HTML ファイルを開き、ボタンを押してみる

正しく webpack によりバンドルされたならば、HTML ファイルを開いてボタンを押すと alert が表示されるはずです。

gyazo.com

備考

私の経験上、何よりもまず「動く」ことを体感できることは次のステップへの大きなモチベーションになると思っています。小さく動かして徐々に大きくしていく、というのは一般的な開発手法の一つでもあります。

なので、最小限で動かすための本記事を書きました。

*1:グローバルかローカルか、npm か yarn か、--dev 付きで入れるか否か、などの論点はありますが、ここでは npm を用いてローカルインストールします

*2:コマンドラインオプションも無く、webpack.config.js も無しで実行される webpack のことを指します

*3:コマンドラインオプションも無く、webpack.config.js も無しで実行される webpack のことを指します

*4:コマンドラインオプションで --mode development を指定すればとりあえずは OK

Powered by はてなブログ