왜 이제야 하게 됐는지 잘 모르겠다.. 너무 중요하단걸 알고 있지만 몇번 봐도 어려워서.. 그리고 우리에겐 CRA이 있으니 웹팩에 별로 중요성을 느끼지 못하고 있었습니다.
그렇게 공부 하던중... 정말 프론트엔드 고수가 뭘까.. 고수가 되려면 어떻게 해야할까.. 고민하던중 웹팩은 기초중에 기초 라는걸 알게 되었고 이제 부터 적극적으로 도입해서 프로젝트를 진행해 보려고 합니다.
mkdir react-typescript-webpack
cd react-typescript-webpack
yarn init -y
yarn add react react-dom
yarn add -D typescript ts-loader webpack webpack-cli @types/react @types/react-dom @types/webpack- yarn add react react-dom react를 패키지에 추가해줍니다.
- typescript loader webpack 등 을 추가해 줍니다.
webpack, tsconfig 설정
//tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"target": "es5",
"module": "esnext",
"jsx": "react",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
},
"include": [
"src"
]
}//package.json
"scripts": {
"build": "webpack"
}package.json에 scripts 를 추가해 줍니다.
리엑트 추가하기
//src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);//src/App.tsx
import React from 'react';
export default function App() {
return <div>React + TypeScript + Webpack!</div>;
}//src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document <%= env %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>드디어 웹팩을 설정해 주겠습니다.
// webpack.config.js
const path = require('path');
const mode = process.env.NODE_ENV || 'development'; //1
module.exports = {
mode,
entry: { //2
app: path.join(__dirname, 'src', 'index.tsx'),
},
output: { //3
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
resolve: { //4
extensions: ['.ts', '.tsx', '.js'],
},
module: {// 5
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
};- webpack4에서 추가된 기능으로 mode에 따라 development, production 로 빌드 됩니다.
배포(production)인 경우 webpack이 알아서 최적화를 진행합니다. - webpack이 파일을 읽어들이기 시작하는 부분입니다. app 즉 키값으로 빌드되니 마음대로 변경 하셔도 좋습니다. src/index.tsx를 가장 먼저 읽어들이겠다는 설정입니다.
- 결과물이 나오는 공간으로 /dist 디렉토리에 app.js로 결과물이 나오게 됩니다. 결과물 이름을 변경 하고 싶으시다면
[name]을 변경해 주시면 됩니다. - webpack이 알아서 경로나 확장자를 처리할수 있게 도와주는 옵션으로 typescript를 사용하지 않는다면 js jsx 로 해주시면 됩니다.
- 바벨을 설정해 준다? (이건 조금더 공부 해봐야 할듯 합니다.)
yarn build 스크립트를 실행하면 webpack이 App.tsx와 index.tsx를 빌드하여 dist/app.js파일을 만들었습니다. 하지만 중요한 html파일을 아직 만들어 주지 않았죠. 이어서 해보겠습니다.
html파일을 처리하기 위한 플러그인 설치
yarn add -D html-webpack-plugin
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const mode = process.env.NODE_ENV || 'development';
module.exports = {
mode,
entry: {
app: path.join(__dirname, 'src', 'index.tsx'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
templateParameters: {
env: process.env.NODE_ENV === 'production' ? '' : '[DEV]',
},
minify:
process.env.NODE_ENV === 'production'
? {
collapseWhitespace: true,
removeComments: true,
}
: false,
}),
],
};설치후 html-webpack-plugin을 설정하면 webpack으로 빈드한 파일을 자동으로 html파일을 추가해 줍니다.
이제 전반적인 세팅은 다 끝났습니다. yarn build 스크립트를 실행하시면 dist디렉토리에 html과 js파일로 묶인걸 볼수 있습니다.
