-
Notifications
You must be signed in to change notification settings - Fork 7
프론트엔드‐Webpack 기반의 React & TypeScript 환경 세팅
Lee sang Yeop edited this page Jul 11, 2024
·
8 revisions
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import webpack from "webpack";
module.exports = (env, argv) => {
const prod = argv.mode === "production";
return {
mode: prod ? "production" : "development",
devtool: prod ? "hidden-source-map" : "eval",
entry: "./src/index.tsx",
output: {
path: path.join(__dirname, "/dist"),
filename: "index.js",
},
devServer: {
port: 3000,
hot: true,
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
alias: {
"@": path.resolve(__dirname, "./src/"),
},
},
devtool: prod ? false : "source-map",
module: {
rules: [
{
test: /\.tsx?$/,
use: ["ts-loader"],
},
],
},
plugins: [
new webpack.ProvidePlugin({
React: "react",
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
minify:
process.env.NODE_ENV === "production"
? {
collapseWhitespace: true, // 빈칸 제거
removeComments: true, // 주석 제거
}
: false,
}),
new CleanWebpackPlugin(),
],
};
};
{
"compilerOptions": {
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
] /* Document, window 등의 라이브러리 타입 추가 */,
"target": "ESNext" /* Typescript 가 변환할 JavaScript의 ECMAScript 버전 */,
"jsx": "react-jsx" /* react 의 jsx 사용하도록 설정 */,
"module": "ESNext" /* TypeScript 컴파일러가 생성하는 JavaScript 모듈 코드의 형식 */,
"moduleResolution": "Node" /* 패키지를 node_modules 에서 찾도록 설정 */,
"baseUrl": "./" /* 기준이 되는 디렉토리 */,
"resolveJsonModule": true /* json 파일을 모듈로 가져올 수 있다 */,
"allowJs": false /* 자바스크립트를 허용할지 여부 */,
"noEmit": true /* 컴파일 결과 파일을 생성하지 않도록 설정 */,
"esModuleInterop": true /* ESM, CJS 모듈 호환 여부 */,
"forceConsistentCasingInFileNames": true /* import 시 파일 이름 대소문자 구분 여부 */,
"strict": true /* Enable all strict type-checking options. */,
"noFallthroughCasesInSwitch": true /* switch case 문에서 case 별 break 넣지 않으면 에러 발생 여부 */,
"skipLibCheck": true /* d.ts 파일을 무시할지 여부 */,
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*"]
}
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"styled-components": "^6.1.11"
},
"devDependencies": {
// 스토리북
"storybook": "^8.1.11",
"@chromatic-com/storybook": "^1.6.1",
"@storybook/addon-essentials": "^8.1.11",
"@storybook/addon-interactions": "^8.1.11",
"@storybook/addon-links": "^8.1.11",
"@storybook/addon-onboarding": "^8.1.11",
"@storybook/addon-webpack5-compiler-swc": "^1.0.4",
"@storybook/blocks": "^8.1.11",
"@storybook/react": "^8.1.11",
"@storybook/react-webpack5": "^8.1.11",
"@storybook/test": "^8.1.11",
// import 순서 정렬
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
// 타입 패키지
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
// build 시 이전 빌드 결과 제거
"clean-webpack-plugin": "^4.0.0",
// js 문법 확인
"eslint": "^8.57.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-storybook": "^0.8.0",
// Webpack에서 HTML 파일을 생성하고 관리
"html-webpack-plugin": "^5.6.0",
// 자동 정렬 포메팅
"prettier": "^3.3.2",
// webpack 에서 typescript 파일을 처리하기 위한 로더
"ts-loader": "^9.5.1",
// 타입스크립트
"typescript": "^5.5.3",
// webpack 패키지
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
}