Webpack부터 TypeScript React환경을 만들기_2
다중 환경 설정
- 시스템은 여러 환경이 있습니다.
- Development
- Staging
- Production
- 이 중 2가지의 환경을 구성할 수 있도록 webpack.config.js 파일 수정 추가 파일
- webpack.config.js
- webpack.common.js
- webpack.prod.js
- webpack.dev.js
- config파일들의 연계를 위해 webpack-merge패키지 설치
yarn add -D webpack-merge
webpack.dev.js
1
2
3
4
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
}
webpack.prod.js
1
2
3
4
module.exports = {
mode: 'production',
devtool: 'source-map',
}
webpack.config.js
1
2
3
4
5
6
7
8
9
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
module.exports = (envVars) => {
const { env } = envVars
const envConfig = require(`./webpack.${env}.js`)
const config = merge(commonConfig, envConfig)
return config
}
webpack.common.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '..', './src/index.tsx'),
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules : [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
type: 'asset/inline',
},
],
},
output: {
path: path.resolve(__dirname, '..', './build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './src/index.html'),
}),
],
}
환경에 따른 명령문 수정
1
2
3
// scripts문에 추가
"start" : "webpack serve --config webpack/webpack.config.js --env env=dev --open",
"build" : "webpack --config webpack/webpack.config.js --env env=prod ",
환경변수 입력하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// webpack.dev.js
const webpack = require('webpack')
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.name': JSON.stringify('It is development'),
}),
],
}
// webpack.prod.js
const webpack = require('webpack')
module.exports = {
mode: 'production',
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.name': JSON.stringify('It is production'),
}),
],
}
입력한 환경변수를 화면에 출력
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// App.tsx
import "./style.css";
import IMAGE from "./react.png";
import LOGO from "./logo.svg";
export const App = () => {
return (
<>
<h1>
React TypeScript Webpack Starter Template - {process.env.NODE_ENV} -{" "}
{process.env.name}
</h1>
<img src={IMAGE} alt="react logo" width="300" height="200" />
<img src={LOGO} alt="react logo" width="300" height="200" />
</>
);
};
화면에 출력되는 변수가 Hot Road이후에도 유지가 되도록 설정
우선 변수를 출력하도록 버튼을 누르면 숫자가 증가하는 기능을 화면에 추가
ClickCount.tsx
1
2
3
4
5
6
7
8
9
10
import { useState } from 'react'
export const ClickCounter = () => {
const [count, setCount] = useState(0)
return (
<div>
<button onClick={() => setCount(c => c + 1)}>Count {count}</button>
</div>
)
}
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import "./style.css";
import IMAGE from "./react.png";
import LOGO from "./logo.svg";
import { ClickCounter } from "./ClickCount";
export const App = () => {
return (
<>
<h1>
React TypeScript Webpack Starter Template - {process.env.NODE_ENV} -{" "}
{process.env.name}
</h1>
<img src={IMAGE} alt="react logo" width="300" height="200" />
<img src={LOGO} alt="react logo" width="300" height="200" />
<ClickCounter />
</>
);
};
yarn start로 실행후 카운팅이 되는지 확인 해보자. 카운팅 후 h1태그 수정후 저장을 하면 hot road이후 카운팅했던 값은 다시 초기화 되어진다. 이렇게 초기화가 되면 확인 작업을 번복 해야하는 경우가 생기기 때문에 초기화가 안되도록 해보자
react-refresh-webpack-plugin설정
1
yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh
webpack.dev.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const webpack = require("webpack");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
mode: "development",
devServer: {
hot: true,
open: true,
},
devtool: "cheap-module-source-map",
plugins: [
new webpack.DefinePlugin({
"process.env.name": JSON.stringify("It is development"),
}),
new ReactRefreshWebpackPlugin(),
],
};
Package.json
1
2
// scripts
"start": "webpack serve --config webpack/webpack.config.js --env env=dev ", //으로 수정
설치 및 설정 후 yarn start로 dev 서버를 실행하면 수정을 하여도 카운팅이 초기화 되지 않는걸 알 수 있다.