typescript, tailwind css를 webpack으로 말기
0
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;그런데 vite를 쓰면 이것도 할 필요가 없음
쓰고 싶은 글만 씀
2개의 댓글
관련 채용 정보
헉 몬진 모르겠지만 멋져요..! 화이팅