npx コマンドについて

プロエジェクト初期化

$ 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.htmlWebアプリの初期画面
src/index.tsWebアプリの初期画面
package.jsonwebpack の依存ライブラリ設定
package-lock.json依存ライブラリの依存ライブラリまで、全ての依存ライブラリのバージョンを記録
tsconfig.jsonTypescrip の設定ファイル
webpack.config.jswebpack の設定ファイル

プロジェクトのビルド

$ 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

開発サーバでの実行

$ 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
hello.png

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

gitで管理する

とりあえずこんな感じ


HTML#Typescript


添付ファイル: filehello2.png 103件 [詳細] filehello.png 114件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2021-12-16 (木) 02:08:11 (157d)
Short-URL:
ISBN10
ISBN13
9784061426061