Node.jsとWebpackで、documentにアクセスできない

前提・実現したいこと

現在Node.jsで動くWebpackでD3.jsというライブラリをコンパイルして
ネットワークグラフをHTML上で動かしたいと考えています。

ソースコードは　https://github.com/Ganariya/d3_graph　にあります。

最初、QiitaのD3.jsを使っているソースコードを写経していたのですが
なぜかブラウザ上に反映されず、色々と試していると
HTML側のDOMにアクセスできていないのでは？となりました。

Webpackを使う理由

HTML上で、グラフネットワークライブラリのD3.jsを動かしたいので、
HTMLのscriptタグにD3.jsのCDNのリンクをベタ書きし
Javascriptタグにそのままネットワークを構築するコードを書いても良いのですが
拡張性を考えてWebpack＋Bableで、モジュール開発をしたいと考えています。

発生している問題・エラーメッセージ

現在、srcフォルダ以下のapp.jsに開発を行っており

javascript
1console.log(document.getElementById("unnti"))
2
3console.log("hello")

となっていて、呼び出し側のHTMLファイルのunntiタグ要素を取ろうとしています。

しかし、ビルド側のdist/index.htmlの<p id = unnti>を取ることなく、
コンソールにnullとのみ出力されてしまいます。

Webpackの設定に問題があるかと思い、見返しましたが
targetはwebにしているため、きちんとフロント側の設定になっているのでは？と考えています。

javascript
1module.exports = {
2    entry: './src/app.js',
3    output: {
4        path: `${__dirname}/dist`,
5        filename: 'main.js'
6    },
7    mode: 'development',
8    target: "web",
9    devServer: {
10        contentBase: 'dist',
11        open: true
12    }
13}

どうして、documentにアクセスできないのでしょうか？

補足情報（FW/ツールのバージョンなど）

JSON
1{
2  "name": "d3_graph",
3  "version": "1.0.0",
4  "description": "",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    "build": "webpack",
9    "start": "webpack-dev-server",
10    "watch": "webpack --watch"
11  },
12  "author": "",
13  "license": "ISC",
14  "devDependencies": {
15    "webpack": "^4.39.1",
16    "webpack-cli": "^3.3.6",
17    "webpack-dev-server": "^3.7.2"
18  },
19  "dependencies": {
20    "d3": "^5.9.7",
21    "d3-color": "^1.3.0"
22  }
23}