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
開発サーバでの実行 †
$ 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 hello.png](http://at-sushi.com/pukiwiki/index.php?plugin=ref&page=Javascript%20Webpack&src=hello.png)
アプリを改造する 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 のミラーサイトを作るべきかな
とりあえずこんな感じ †
- たぶん、生で Webpack を使うことはなくて、Webpack 上で Nuxt.js/Vue.js または Next.js/React.js を使うということになるだろう。
HTML#Typescript