いい感じにできた。
成果物
参考
前提
まずはNode.jsを入れる。
手順
- プロジェクトを作る
- webpackをインストールする
- テストコードを書く
- ビルドする
- 実行する
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"
はいらない。srcipt
のtype="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:///
で実行する
- ブラウザで
file:///...index.html
を開く。
成功!
5-2. ローカルサーバで実行する
npx webpack serve
成功! ブラウザでhttp://localhost:8080/
をみると実行された。
所感
モジュールをバンドルできた。これだよ、これがやりたかったんだ。デフォルト設定のままにすれば設定ファイルを触らずに済む。楽でいいわ。これなら使えそう。いいね!
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
- node 12.18.4
- webpack 5.17.0
$ uname -a Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux