やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

webpack5を使う【最短】

 いい感じにできた。

成果物

参考

前提

 まずはNode.jsを入れる。

手順

  1. プロジェクトを作る
  2. webpackをインストールする
  3. テストコードを書く
  4. ビルドする
  5. 実行する

1. プロジェクトを作る

 ルート・ディレクトリ作成する。

mkdir test_project
cd test_project
mkdir src

 以下コマンドを実行する。

npm init -y

2. webpackをインストールする

npm i -D webpack webpack-cli webpack-dev-server

 1分30秒くらいかかった。遅い。

ログ

npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})
npm WARN test_project@1.0.0 No description
npm WARN test_project@1.0.0 No repository field.

+ webpack-dev-server@3.11.2
+ webpack-cli@4.4.0
+ webpack@5.17.0
added 500 packages from 325 contributors and audited 501 packages in 90.009s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. テストコードを書く

  • test_project/
    • node_modules/
    • package.json
    • index.html
    • src/
      • index.js
      • Sub.js

 つくるのは赤字の3ファイルだけ。

エントリポイント

  • webpackはデフォルトでsrc/配下にあるindex.jsを最初に見に行く。

./src/index.js

import Sub from './sub.js';
window.addEventListener('load', (event) => {
    let sub = new Sub();
    sub.show();
});

 とりこみたいコードも書く。

./src/sub.js

export default class Sub {
    constructor() { this.msg="Hello Webpack !!"; }
    show() { console.log(this.msg); alert(this.msg); }
}

出力先

 webpackはデフォルトでdist/ディレクトリのmain.jsにファイルを出力する。

 なので、index.htmlは./dist/main.jsを読めばいい。

index.html

<script src="./dist/main.js"></script>

type="model"はいらない。  srcipttype="model"はいらない。webpackが1ファイルにまとめてくれたから。そのおかげでCORSエラーなし。ローカルサーバを立ち上げず、file:///....から直接ブラウザで開いても実行できる。いいね!
ビルド結果  ビルドして出力されたファイルを見てみると、以下のようになっていた。

./dist/main.js

(()=>{"use strict";class s{constructor(){this.msg="Hello Webpack !!"}show(){console.log(this.msg),alert(this.msg)}}window.addEventListener("load",(o=>{(new s).show()}))})();

4. ビルドする

npx webpack --watch

5. 実行する

5-1. file:///で実行する

  1. ブラウザでfile:///...index.htmlを開く。

 成功! 

5-2. ローカルサーバで実行する

npx webpack serve

 成功! ブラウザでhttp://localhost:8080/をみると実行された。

所感

 モジュールをバンドルできた。これだよ、これがやりたかったんだ。デフォルト設定のままにすれば設定ファイルを触らずに済む。楽でいいわ。これなら使えそう。いいね!

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux