TypeScript + webpack5の環境構築メモ
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-02%2016.29.02.png?alt=media&token=aeacaf3f-d42b-4c94-9456-7f7f42db4020)
まずはnpmモジュールのインストール
プロジェクトのディレクトリに移動してコマンドを入力!
$ npm i -D webpack webpack-cli webpack-dev-server webpack-merge typescript ts-loader
コマンド入力後TypeScriptの設定ファイル、tsconfig.jsonをプロジェクトのルートに作成。
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015",
"outDir": "dist",
"sourceMap": true,
"strict": true
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}
tsconfigの説明は下記。
compilerOptions: { // コンパイルする際のオプションを記載する
module: 出力するjsのモジュールで、何を使用するか指定(ex. CommonJS)
target: コンパイルするjsのバージョン
outDir: jsファイルを出力するディレクトリ
sourceMap: ソースマップファイル有無
strict: 厳密な型チェック
},
include: [コンパイルに含めるファイルと一致するパターンを記述]
exclude: [コンパイルから除外するファイルパターンを記述]
次は、webpackの設定ファイル「webpack.common.js」を作成
const path = require('path');
module.exports = {
entry: {
app: './src/index.ts',
},
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
},
],
},
resolve: {
extensions: [
'.ts'
],
},
};
次は、開発用のwebpackの設定ファイル「webpack.dev.js」を作成
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
});
ほいで、webpackの本番用の設定ファイル「webpack.prod.js」を作成
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map'
});
package.jsonにこちらを追記
"scripts": {
"start": "webpack serve --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
ではsrc/index.tsファイルを作り下記を記載
const text: string = 'test';
console.log(text);
では動作確認!
$ npm run build
dist/app.jsができていました。結果は!!
(()=>{"use strict";console.log("test")})();
//# sourceMappingURL=app.js.map
コンパイルがしっかりできていました!
以上です。