Javascript Webpack

2024-12-042024
92.4% (338.3/366)
December
10.8% (3.3/31)
Week 49
33.8% (2.3/7)
Day 04 Wed
36.7% (8.8/24)

訪問者

total: 2682
today: 1
yesterday: 0
now: 1

↑

更新

MenuBar

npx コマンドについて
プロエジェクト初期化
初期プロジェクトの内容
プロジェクトのビルド
開発サーバでの実行
アプリを改造する LESS でスタイルを適用する
gitで管理する
とりあえずこんな感じ

npx コマンドについて †

npm コマンドでパッケージをインストールすると、プロジェクトディレクトリ配下にダウンロードされる
- たとえば SampleWeb?/node_modules/.bin 以下にダウンロードされる
"$ npx {コマンド}" で、{コマンド} に PATH を通していなくてもプロジェクト配下のディレクトリからコマンドを探してくれる

↑

プロエジェクト初期化 †

$ mkdir SampleWeb
$ cd SampleWeb
$ npm install --save-dev webpack ts-loader  @webpack-cli/generators
$ npm install --save-dev less less-loader style-loader css-loader
$ npx webpack-cli init

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? Yes
? Which of the following CSS solutions do you want to use? LESS
? Will you be using CSS styles along with LESS in your project? Yes
? Will you be using PostCSS in your project? No
? Do you want to extract CSS for every file? Yes
? Do you like to install prettier to format generated configuration? Yes
? Overwrite package.json? overwrite
[webpack-cli] Project has been initialised with webpack!

↑

初期プロジェクトの内容 †

$ tree -I node_modules
.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│     └── index.ts
├── tsconfig.json
└── webpack.config.js

1 directory, 7 files

index.html	Webアプリの初期画面
src/index.ts	Webアプリの初期画面
package.json	webpack の依存ライブラリ設定
package-lock.json	依存ライブラリの依存ライブラリまで、全ての依存ライブラリのバージョンを記録
tsconfig.json	Typescrip の設定ファイル
webpack.config.js	webpack の設定ファイル

↑

プロジェクトのビルド †

$ npm run build

> my-webpack-project@1.0.0 build
> webpack --mode=production --node-env=production

asset workbox-543be79b.js 13.9 KiB [emitted] [minimized]
asset service-worker.js 1.05 KiB [emitted] [minimized]
asset index.html 747 bytes [emitted]
asset main.js 28 bytes [emitted] [minimized] (name: main)
./src/index.ts 29 bytes [built] [code generated]

LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i>         2 URLs, totaling 775 B.

webpack 5.65.0 compiled successfully in 4707 ms

dist/ 以下に配布資産ができる

$ tree dist/
dist/
├── index.html
├── main.js
├── service-worker.js
└── workbox-543be79b.js

0 directories, 4 files

↑

開発サーバでの実行 †

$ npm run serve

> my-webpack-project@1.0.0 serve
> webpack serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/atsushihondoh/Documents/Node/SampleWeb/public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
asset main.js 290 KiB [emitted] (name: main)
asset index.html 823 bytes [emitted]
runtime modules 30 KiB 15 modules
modules by path ./node_modules/ 199 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 52.7 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
./src/index.ts 29 bytes [built] [code generated]
webpack 5.65.0 compiled successfully in 3021 ms

↑

アプリを改造する LESS でスタイルを適用する †

資産 (index.js) を変更すると、リアルタイムで開発サーバに反映される

LESSの追加。LESS は変数が使える CSS と考えればいい

webpack.config.js の less に関する処理を追加する

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader"],
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

src/less/app.less

@charset "UTF-8";
@import "./variables.less";

body {
  background-color: @blue;
}

src/less/variables.less
```
@red: #ff1122;
@blue: #1122ff;
```

src/index.ts

import './less/app.less';

console.log("Hello Typescript World!");

Viva

↑

gitで管理する †

/node_modules/ には、このプロジェクトで使うモジュールがキャッシュされている。このディレクトリは git で管理しない
.gitignore
```
/node_modules/
```
git clone してきたら npm install を実行する。すると、package.json に記述されている依存モジュールが /node_modules/ に展開される
大人数のプロジェクトなら、LAN 内に npm のミラーサイトを作るべきかな
- cf. Javascript Node.js
- cf. Docker Compose Sonatype Nexus を例に基本的な使い方を学ぶ

↑

とりあえずこんな感じ †

たぶん、生で Webpack を使うことはなくて、Webpack 上で Nuxt.js/Vue.js または Next.js/React.js を使うということになるだろう。

HTML#Typescript