React 사용 설정하기 (webpack) with TypeScript

# React 사용 설정하기 (webpack) with TypeScript 우선 node.js 를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (내 프로젝트에서는 multi language 를 support 하기 위해 pattern replace 를 사용하기 때문에 backticks `[--some code with ${var} sentence.--]` 를 pattern replace 로 다른 언어로 transform 하고자 하여, 이걸 유지하고 싶기 때문에 @babel/preset-env (: ES6+ 코드를 ES5로 트랜스파일링하고 브라우저 폴리필을 자동화해 주는) 는 일부러 뺌.) ```[.linenums] npm init -y npm install webpack webpack-cli @webpack-cli/generators babel-loader @babel/core @babel/preset-react html-webpack-plugin --save-dev npm install react react-dom jquery immer use-immer npm install typescript typescript@next @types/react @types/react-dom @types/jquery ts-loader @babel/preset-typescript --save-dev // type JQuery for $("#some-id .some-class") object. npm install style-loader css-loader terser-webpack-plugin --save-dev npm install redux @reduxjs/toolkit tsc --init npx webpack init ```/ 파일 package.json 이 잘 설정되어 있다면, ```[.linenums] npm install npm install --upgrade // 최신 버전으로 다시 깔기. ```/ 만 치면 알아서 다 깔리는듯? ## PH

• 2024-03-30 : First posting.

## TOC ## package.json ```[.linenums.lang-json] { "name": "my-webpack-project", "version": "1.0.0", "main": "index.tsx", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=production --node-env=production", "build:dev": "webpack --mode=development", "build:prod": "webpack --mode=production --node-env=production", "watch": "webpack --watch" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.24.4", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", "@types/jquery": "^3.5.29", "@types/react": "^18.2.79", "@types/react-dom": "^18.2.25", "@webpack-cli/generators": "^3.0.7", "babel-loader": "^9.1.3", "css-loader": "^7.1.1", "html-webpack-plugin": "^5.6.0", "mini-css-extract-plugin": "^2.9.0", "prettier": "^3.2.5", "style-loader": "^4.0.0", "terser-webpack-plugin": "^5.3.10", "ts-loader": "^9.5.1", "typescript": "^5.4.5", "webpack": "^5.91.0", "webpack-cli": "^5.1.4" }, "dependencies": { "@reduxjs/toolkit": "^2.2.3", "acorn": "^8.11.3", "acorn-import-assertions": "^1.9.0", "ajv": "^8.12.0", "ajv-formats": "^2.1.1", "ajv-keywords": "^5.1.0", "ansi-regex": "^5.0.1", "ansi-styles": "^3.2.1", "boolbase": "^1.0.0", "browserslist": "^4.23.0", "buffer-from": "^1.1.2", "camel-case": "^4.1.2", "caniuse-lite": "^1.0.30001612", "chalk": "^2.4.2", "chrome-trace-event": "^1.0.3", "clean-css": "^5.3.3", "clone-deep": "^4.0.1", "color-convert": "^1.9.3", "color-name": "^1.1.3", "colorette": "^2.0.20", "commander": "^8.3.0", "common-path-prefix": "^3.0.0", "convert-source-map": "^2.0.0", "cross-spawn": "^7.0.3", "css-select": "^4.3.0", "css-what": "^6.1.0", "debug": "^4.3.4", "dom-converter": "^0.2.0", "dom-serializer": "^1.4.1", "domelementtype": "^2.3.0", "domhandler": "^4.3.1", "domutils": "^2.8.0", "dot-case": "^3.0.4", "electron-to-chromium": "^1.4.746", "enhanced-resolve": "^5.16.0", "entities": "^2.2.0", "envinfo": "^7.12.0", "es-module-lexer": "^1.5.0", "escalade": "^3.1.2", "escape-string-regexp": "^1.0.5", "eslint-scope": "^5.1.1", "esrecurse": "^4.3.0", "estraverse": "^4.3.0", "events": "^3.3.0", "fast-deep-equal": "^3.1.3", "fast-json-stable-stringify": "^2.1.0", "fastest-levenshtein": "^1.0.16", "find-cache-dir": "^4.0.0", "find-up": "^6.3.0", "flat": "^5.0.2", "function-bind": "^1.1.2", "gensync": "^1.0.0-beta.2", "glob-to-regexp": "^0.4.1", "globals": "^11.12.0", "graceful-fs": "^4.2.11", "has-flag": "^3.0.0", "hasown": "^2.0.2", "he": "^1.2.0", "html-minifier-terser": "^6.1.0", "htmlparser2": "^6.1.0", "immer": "^10.0.4", "import-local": "^3.1.0", "interpret": "^3.1.1", "is-core-module": "^2.13.1", "is-plain-object": "^2.0.4", "isexe": "^2.0.0", "isobject": "^3.0.1", "jest-worker": "^27.5.1", "jquery": "^3.7.1", "js-tokens": "^4.0.0", "jsesc": "^2.5.2", "json-parse-even-better-errors": "^2.3.1", "json-schema-traverse": "^1.0.0", "json5": "^2.2.3", "kind-of": "^6.0.3", "loader-runner": "^4.3.0", "locate-path": "^7.2.0", "lodash": "^4.17.21", "lower-case": "^2.0.2", "lru-cache": "^5.1.1", "merge-stream": "^2.0.0", "mime-db": "^1.52.0", "mime-types": "^2.1.35", "ms": "^2.1.2", "neo-async": "^2.6.2", "no-case": "^3.0.4", "node-releases": "^2.0.14", "nth-check": "^2.1.1", "p-limit": "^4.0.0", "p-locate": "^6.0.0", "p-try": "^2.2.0", "param-case": "^3.0.4", "pascal-case": "^3.1.2", "path-exists": "^5.0.0", "path-key": "^3.1.1", "path-parse": "^1.0.7", "picocolors": "^1.0.0", "pkg-dir": "^7.0.0", "pretty-error": "^4.0.0", "punycode": "^2.3.1", "randombytes": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "rechoir": "^0.8.0", "redux": "^5.0.1", "relateurl": "^0.2.7", "renderkid": "^3.0.0", "require-from-string": "^2.0.2", "resolve": "^1.22.8", "resolve-cwd": "^3.0.0", "resolve-from": "^5.0.0", "safe-buffer": "^5.2.1", "schema-utils": "^4.2.0", "semver": "^6.3.1", "serialize-javascript": "^6.0.2", "shallow-clone": "^3.0.1", "shebang-command": "^2.0.0", "shebang-regex": "^3.0.0", "source-map": "^0.6.1", "source-map-support": "^0.5.21", "strip-ansi": "^6.0.1", "supports-color": "^5.5.0", "supports-preserve-symlinks-flag": "^1.0.0", "tapable": "^2.2.1", "terser": "^5.30.4", "to-fast-properties": "^2.0.0", "tslib": "^2.6.2", "undici-types": "^5.26.5", "update-browserslist-db": "^1.0.13", "uri-js": "^4.4.1", "use-immer": "^0.9.0", "utila": "^0.4.0", "watchpack": "^2.4.1", "webpack-merge": "^5.10.0", "webpack-sources": "^3.2.3", "which": "^2.0.2", "wildcard": "^2.0.1", "yallist": "^3.1.1", "yocto-queue": "^1.0.0" }, "description": "My webpack project" } ```/ 위 세팅으로부터 아래와 같은 명령어를 쓸 수 있게 됨. ```[.linenums] npm run dev npm run build npm run test ```/ ## webpack.config.js ```[.linenums.lang-js] // Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const isProduction = process.env.NODE_ENV == 'production'; const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; const config = { entry: './src/index.tsx', output: { path: path.resolve('C:/Recoeve/src/main/java/recoeve/db/html'), filename: 'bundle-tsx-user-page.js' }, plugins: [ // Add your plugins here // Learn more about plugins from https://webpack.js.org/configuration/plugins/ new HtmlWebpackPlugin({ title: 'Setup webpack & babel', template: 'user-page.html', filename: 'unused-tsx-user-page.html' }) ], module: { rules: [ { test: /\.jsx?$/i, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ["@babel/preset-react"] } } }, { test: /\.(ts|tsx)$/i, exclude: ['/node_modules/'], use: { loader: "babel-loader", options: { presets: ["@babel/preset-react", "@babel/preset-typescript"] } } }, { test: /\.css$/i, use: [stylesHandler, 'css-loader'], }, // { // test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, // type: 'asset', // }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ ], }, resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'], }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ test: /\.js(\?.*)?$/i, exclude: /node_modules/, terserOptions: { ecma: 2020, // Preserve ES6 syntax compress: { // Other compress options here }, mangle: true } }) ] }, }; module.exports = () => { if (isProduction) { config.mode = 'production'; config.plugins.push(new MiniCssExtractPlugin()); } else { config.mode = 'development'; } return config; }; ```/ ## RRA

1. nodejs.org
2. webpack.kr/concepts/
3. react.dev/learn
4. https://www.npmjs.com/package/terser-webpack-plugin