第1回 イチからWebpackのconfigを書いてTypeScriptをコンパイルする
まずは webpack と webpack-cli を入れよう
code:yarn の場合
yarn init -y
yarn add -D webpack webpack-cli
code:npm の場合
npm init -y
npm install --save-dev webpack webpack-cli
webpack を呼び出す
npx というのを使って呼び出すことができる。
code:呼び出し方
npx webpack --version
セットアップ
front/ フォルダ下に次のファイルを作る。以下全て front/ フォルダ下でやる。
code:webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
TypeScript をやりたいので、main.ts を作っていく。ということで、「main.ts を扱いたい」と教える。
code:webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
もちろん src/main.ts 自体を作る必要がある。ということでファイルを作成していただいて、
code:src/main.ts
console.log("Hello!");
まだ webpack は TypeScript のことを知らないので、教えてあげる必要がある。
ここを参考にする。
code:webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
"ts-loader",
],
},
],
},
};
TypeScript のコードを JavaScript に先に変換してから実行したりする都合上、「バグったときに、もとのソースコード上では何行目に問題があったのか？」というのを把握する source map というやつの設定もやっておきたい。
Node.js とブラウザは、異なる環境なので、使えるものが異なる。例えば、ブラウザ上では window.location.href と書くことで現在のページの URL を取得したり変更したりすることができるが、Node.js にそんなものはないので、window.location.href なんて書いてしまっては「windowなんて知らないんですが」と言われてしまう。そういう都合もあり、「なんの目的でJavaScriptを使いたいの？」というのを書く必要があって、そのために使うのが target である。
最終的にこうなる
mode
target
resolve
devtool
を足すことで、最終的にこうなる。
code:webpack.config.js
module.exports = {
mode: "development",
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
"ts-loader",
],
},
],
},
resolve: {
},
devtool: "eval-source-map",
};
しかし、これでnpx webpackコマンドを実行するとエラーが出る。
Module not found: Error: Can't resolve 'ts-loader' in '/home/2022WEB/2022-web/ura-section-01/front'
これはなぜかというと、ts-loader をまだインストールしていないから。ということで、さっき webpack を足したときと同様のことをしたいが、TypeScript もこのときに同時に足しておきたい。
code:yarnの場合.sh
yarn add -D ts-loader typescript
code:npmの場合.sh
npm add --save-dev ts-loader typescript
しかしこれでもまだダメ。
TS18002: The 'files' list in config file 'tsconfig.json' is empty.
これは tsconfig.json がないからである。ということで tsconfig を書く。まず npx tsc --init する。すると tsconfig.json が作られる。
なかなか長いけど、このファイルに以下の変更を加える。
「"target": "es2016"」を「"target": "es2020"」
「"module": "commonjs"」を「"module": "esnext"」
「// "moduleResolution": "node"」の先頭のスラッシュ二つを削除
「// "outDir": "./"」を「"outDir": "./dist"」にする
dist フォルダの中を見ると、最初に設定した console.log("Hello!") がなんか埋め込まれたなんかが出てくる。
この sourceMappingURL というやつが、元々のファイルとの対応関係を書いてある。人間には読めないが、機械が読んでくれるのでOK。
もうちょいコードを書いていこう。
code:main.ts
const add = (a: number, b: number): number => {
return a + b;
};
console.log("Hello!")
console.log(add(3, 5))
node dist/bundle.js すると
Hello!
8
とちゃんと出る。
npx webpack と書くのが面倒くさいので、scripts の build に webpack と書いてやることで yarn build でビルドができるようになる。npx webpack が yarn build に変わっただけだと御利益が薄そうだけど、（……）