순서대로 실행하기
npm init
npm i typescript
npm i react react-dom
npm i webpack webpack-cli -D
npm i awesome-typescript-loader -D
npm i @types/react @types/react-dom여기까지 설치 후 script 실행 부분 변경
"scripts": {
"dev": "webpack"
},{
"name": "react-typescript-webpack-init",
"version": "1.0.0",
"description": "react typescript webpack init",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/mobssie/ReactTsWebpackSetting.git"
},
"author": "Mobssie",
"license": "ISC",
"bugs": {
"url": "https://github.com/mobssie/ReactTsWebpackSetting/issues"
},
"homepage": "https://github.com/mobssie/ReactTsWebpackSetting#readme",
"dependencies": {
"@types/react": "^17.0.5",
"@types/react-dom": "^17.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.2.4"
},
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0"
}
}
버젼이 안 맞을수있으니 주의를 기울일것
tsconfig.json / webpack.config.js 파일 만들기
{
"compilerOptions": {
"strict": true,
"lib" :[
"es5",
"es2015",
"es2016",
"es2017",
"es2018",
"es2019",
"es2020",
"es2021",
"dom"
],
"jsx" : "react",
// "esModuleInterop": true
}
}[tsconfig.json]
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development', // production
devtool: 'eval', // hidden-source-map (production 모드에서)
resolve: {
extensions: ['.jsx', '.js', '.tsx', '.ts'],
},
entry: {
app: './client.tsx'
},
module:{
rules:[{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
}]
},
plugins: [
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
}
}[webpack.config.js]
npx webpackwebpack이 빌드 실행되고, js파일을 실행해야하므로 index.html 파일을 만든다.
<html>
<head>
<meta charset="UTF-8">
<title>리액트 타입스트립크 웹팩 설정 및 설치하기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>[index.html]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Test from './Test';
ReactDOM.render(<Test/>, document.querySelector('#root'));
[client.tsx]
git: github.com/mobssie/ReactTsWebpackSetting.git
비교
webpack vs babel
ts-loader vs atl(awesome-typescript-loader)
'Frontend > Typescript' 카테고리의 다른 글
| typescript 설치부터 사용법 정리 (0) | 2021.05.24 |
|---|---|
| Typescript 로 기초부터 시작하기 (0) | 2021.05.11 |
| 번들링 속도 개선하기(Feat. React, Typescript, Webpack) (0) | 2021.03.08 |