ts파일을 webpack 사용을 위한 초기 설정

공부기록/Node.js

ts파일을 webpack 사용을 위한 초기 설정

Jenner 2023. 4. 20. 14:02

tsconfig.json파일 설정

타입스크립트 로더의 웹팩이 이 타겟을 사용

코드가 어디에서 사용될지에 따라 자바스크립트의 변환이 다름

"target" : "es6" //es5이상

컴파일한 파일이 저장되는 위치

"outDir":"./dist" //다른 경로에서 코드를 컴파일 하고자 하면 변경 가능

컴파일 시작파일 경로 (webpack에서 필요하지 않음)

웹팩이 루트파일 위치를 결정할 것임.

//"rootDir":"./src" // 경로가 필요하지 않으므로 주석

webpack.config.js파일 생성

자바스크립트 오브젝트를 export하기

module.exports={}

entry포인트 설정하기 (웹팩의 시작지점)

module.exports = {
  entry: "./src/app.ts",
}

웹팩은 해당 파일로 시작해, 파일 내의 import 파일들을 파악하여

해당 파일들로 가서 그 임포트를 파악함

모든 파일을 파악할 때까지

ts로더 패키지의 도움을 받아 그것들을 컴파일 함

모든 import에서 .js확장자 삭제 (웹팩이 .js및 기타 확장자를 찾을 것이므로)

삭제하지 않으면 웹팩이 이중으로 된 확장자를 보게 됨.

import { ProjectInput } from './components/project-input';
import { ProjectList } from './components/project-list';

new ProjectInput();
new ProjectList('active');
new ProjectList('finished');

output 설정하기 (마지막에 생성되는 자바스크립트 파일 )

1. output 내부에 파일명 설정

동적으로도 설정 가능

module.exports = {
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
  },

tsconfig.json 파일에서 outDir과 경로를 맞춰야

에러를 방지할 수 있음

tsconfig.json 파일

"outDir":"./dist"

2. path설정 (절대경로이므로 path모듈을 가져와서 절대경로 입력)

const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

3. module 설정

파일을 어떻게 처리할 지, 파일내 import들을 어떻게 처리할지 전달
ts-loader가 웹팩에게 타입스크립트 처리 방식을 전달하는 것을 지원

module
- test : 이 규칙이 해당 파일에 적용되는지 여부를 알아내기 위해 시험할 파일

(정규표현식 활용, 파일확장자 점검 \.ts$)

- use : 웹팩이 무엇을 할지 (여기서는 ts-loader를 사용, 그러면 자동으로 tsconfig.json파일을 고려)

-exclude: 웹팩이 찾지 않을 것들(정규표현식 활용)

const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

4. resolve

임포트에 어떤 익스텐션이 추가되어야 하는지 알려줌

extensions 의 배열에 .ts, .js를 추가하여

웹팩에게 .ts, .js파일을 찾아야 한다고 알려줌

const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },


  resolve: {
    extensions: [".ts", ".js"],
  },
};

이러면 .ts와 .js파일들을 찾아 함께 임포트하는 이 확장자를 갖는 파일들을 bundle할 것.

5. tsconfig.json파일에서 sourceMap true로 설정,

"sourceMap": true

코드를 디버깅하는 것을 도움 웹팩도 지원

6. devtools를 inline-source-map으로 설정

번들을 추출하고 정확하게 접속해야 하는 생성된 소스맵이 존재한다는 것을 전달

const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },

  devtool: "inline-source-map",

  resolve: {
    extensions: [".ts", ".js"],
  },
};

7. package.json파일에서 scripts부분의 build에 원하는 이름을 입력

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server ",
    "build": "webpack"
  },

8.build를 함

npm run build

9. 성공적으로 build되면 index.html파일에서 가져올 script 파일부분에

내가 bundle하여 만든 하나의 파일의 경로를 입력해줌

    <script type="module" src="dist/bundle.js"></script>

9. webpack dev server를 사용

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },

티스토리