참고
[2019.07.11] React + TypeScript + Webpack 환경 설정 - 티스토리 블로그[React webpack 밑바닥에서 부터 설정해보기](React webpack 밑바닥에서 부터 설정해보기)
$ yarn add webpack webpack-cli -D
$ yarn add typescript ts-loader -D
내 블로그에 webpack.config.json 관련한 글
아래 코드는 webpack 공식 문서의 예시다.
const path = require('path'); module.exports = { mode: 'development', entry: { app: './src/app.tsx', }, devtool: 'inline-source-map', module: { rules: [ { test: /\.tsx?/, loader: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.ts', '.tsx'], }, output: { filename: 'app.js', path: path.join(__dirname + '/dist'), }, //출력 }; plugins: [ new HtmlWebpackPlugin() ]
참고 :
SourceMap : what is sourceMap?
HtmlWebpackPlugin : github - HtmlWebpackPlugin
아래 코드는 webpack 공식 문서의 예시다.
{ "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "es6", "target": "es5", "jsx": "react", "allowJs": true, "moduleResolution": "node", } }
내 프로젝트 내에는 조금 다르게 해줬다. mono-repo 구조로서 root에 tsconfig를 설정하고 그것을 extends 옵션으로 가져와 주었다.
내 프로젝트 내의 ts.config.json
{ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "./dist/", "jsx": "react", "sourceMap": true } }
$ yarn add react react-dom @types/react @types/react-dom
next.js를 얹으려고 next에 맞게 pages 디렉토리 등을 만들고 index.tsx
를 생성해서 간단한 컴포넌트를 만들고
심심해서 next dev
를 실행시켰는데....
(next.js가 webpack을 자동으로 설정하는 것을 기억하지 못하고 있다가 깨달았다.)