webpack の使い方

こちらのページの通りに行いました。
Webpackとは【Webpack + TypeScript + React で環境構築】

次のバージョンで確認しました。

$ node --version
v17.6.0

GitHub からクローン

git clone https://github.com/igsr5/webpack-test-react

ビルド&実行

cd webpack-test-react
npx webpack serve --config webpack.config.js

次のエラーが出ます。

    at /home/uchida/webpack-test-react/node_modules/webpack/lib/NormalModule.js:809:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

環境変数を設定してエラーを回避

export NODE_OPTIONS=--openssl-legacy-provider
npx webpack serve --config webpack.config.js

クライアントで
http://localhost:8080/
にアクセス

webpack を使います

dist フォルダーを削除

rm -rf dist

コンパイル

webpack --config webpack.config.js

dist フォルダーが作成されます。

$ tree dist
dist
├── app.js
└── index.html

コンパイルされたコードを実行

$ serve dist

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   Serving!                                      │
   │                                                 │
   │   - Local:            http://localhost:3000     │
   │   - On Your Network:  http://192.168.1.6:3000   │
   │                                                 │
   │   Copied local address to clipboard!            │
   │                                                 │
   └─────────────────────────────────────────────────┘

クライアントで
http://localhost:3000
にアクセス

プログラムを改造

src/HelloWorld.tsx

import * as React from 'react';

const HelloWorld: React.FC = () => <div>
<h1>皆さんこんにちは!!</h1><blockquote>Hello World!!</blockquote></div>;
export default HelloWorld;

開発サーバーを起動

npx webpack serve --config webpack.config.js

ブラウザーで　http://localhost:8080/ にアクセス

コンパイル

webpack --config webpack.config.js

dist のコードを実行

serve dist

ブラウザーで　http://localhost:3000/ にアクセス