typescript, tailwind css를 webpack으로 말기

milmil·2023년 4월 7일

타입스크립트와 나

목록 보기

2/2

package.json

{
    ...
    "devDependencies": {
    "autoprefixer": "^10.4.14",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.2.4",
    "sass": "^1.60.0",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "tailwindcss": "^3.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.3",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
      ...
  }

여기서 scss(sass) 안 쓸거면 빼도됨
웹팩버전은 5임 (그 전 버전은 설정이 다르니 헷갈리면 안 됨)

$ yarn autoprefixer css-loader html-webpack-plugin postcss-loader style-loader tailwindcss ts-loader typescript webpack webpack-cli webpack-dev-server --dev

모든 설정 파일은 루트에 생성

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/**/*.{html,js,ts}"],
	theme: {
	  extend: {},
	},
	plugins: [],
  }

postcss.config.js

module.exports = {
	plugins: {
	  tailwindcss: {},
	  autoprefixer: {},
	},
  };

tsconfig.config.js

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 또는 'production', 'none', 'auto'
  target: 'web',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 5050,
	hot: true,
	watchFiles: ['src/**/*']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(sass|css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

hrm(새로고침 안 해도 불러와짐) 안 돼서 머리털 뽑을 뻔 했는데 hot:true 옵션과 watchFiles 옵션을 넣으니 되는 거 같네요. 아마 이러면 될 걸?

디렉토리 구조

index.html

알아서 html 파일 만들자
별도로 import는 하지 않음 (웹팩에서 알아서 다 해줌)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Webpack</title>
  </head>
  <body>
    <div class="container max-w-4xl mx-auto mt-8 border rounded-md px-1 py-1">
      <h2 class="text-center text-3xl my-3">🥺</h2>
      <hr class="border-top my-3" />

	  <div>
		아직 아무것도 없다!
	  </div>
    </div>
  </body>
</html>

index.ts

import './tailwind.css';

css는 여기에 import 하고 이제 스크립트는 여따 알아서 잘 쪼개서 넣는다

이런식으로 타입스크립트 쓸 수 있음

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

이러면 바닐라자바스크립트스럽게 바닐라타입스크립트(...?) 쓸 수 있음
굳이 그렇게 할 필요는 없지만...
한 페이지 만드는데 다른 라이브러리나 프레임워크 붙이는 것도 더 귀찮은 거 같고 그냥 자바스크립트는 쓰기 싫어서 웹팩을 써봄

milmil

쓰고 싶은 글만 씀

이전 포스트

vue - nuxt.js - typescript: Property '*' does not exist on type 등..

2개의 댓글

우진

2023년 4월 7일

헉 몬진 모르겠지만 멋져요..! 화이팅

1개의 답글

typescript, tailwind css를 webpack으로 말기