Skip to content

Commit 6024461

Browse files
ahastudioahastudio
committed
Webpack 5 샘플
1 parent 5f5df30 commit 6024461

8 files changed

Lines changed: 13185 additions & 0 deletions

File tree

‎20211130/webpack/.eslintrc.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
},
6+
extends: [
7+
'airbnb-base',
8+
'plugin:react/recommended',
9+
],
10+
parserOptions: {
11+
ecmaVersion: 13,
12+
sourceType: 'module',
13+
},
14+
rules: {
15+
indent: ['error', 2],
16+
'no-trailing-spaces': 'error',
17+
curly: 'error',
18+
'brace-style': 'error',
19+
'no-multi-spaces': 'error',
20+
'space-infix-ops': 'error',
21+
'space-unary-ops': 'error',
22+
'no-whitespace-before-property': 'error',
23+
'func-call-spacing': 'error',
24+
'space-before-blocks': 'error',
25+
'keyword-spacing': ['error', { before: true, after: true }],
26+
'comma-spacing': ['error', { before: false, after: true }],
27+
'comma-style': ['error', 'last'],
28+
'comma-dangle': ['error', 'always-multiline'],
29+
'space-in-parens': ['error', 'never'],
30+
'block-spacing': 'error',
31+
'array-bracket-spacing': ['error', 'never'],
32+
'object-curly-spacing': ['error', 'always'],
33+
'key-spacing': ['error', { mode: 'strict' }],
34+
'arrow-spacing': ['error', { before: true, after: true }],
35+
'import/no-extraneous-dependencies': ['error', {
36+
devDependencies: [
37+
'**/*.test.js',
38+
'**/*.test.jsx',
39+
'**/*.test.ts',
40+
'**/*.test.tsx',
41+
],
42+
}],
43+
'import/extensions': ['error', 'ignorePackages', {
44+
js: 'never',
45+
jsx: 'never',
46+
ts: 'never',
47+
tsx: 'never',
48+
}],
49+
'react/jsx-filename-extension': [2, {
50+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
51+
}],
52+
},
53+
};

‎20211130/webpack/.vscode/settings.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"editor.rulers": [
3+
80
4+
],
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": true
7+
},
8+
"trailing-spaces.trimOnSave": true,
9+
}

‎20211130/webpack/README.md‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
# Webpack 5 샘플
2+
3+
- <https://webpack.js.org/guides/getting-started/>
4+
- <https://webpack.js.org/guides/development/>
5+
- <https://webpack.js.org/loaders/babel-loader/>
6+
7+
※ 주의할 점:
8+
`index.html` 파일의 위치가 `public` 폴더 아래로 바뀜.
9+
10+
## Webpack 기본 세팅
11+
12+
```bash
13+
npm init -y
14+
npm i -D webpack webpack-cli webpack-dev-server
15+
```
16+
17+
`public/index.html` 파일 작성
18+
19+
```bash
20+
mkdir -p public
21+
touch public/index.html
22+
```
23+
24+
```html
25+
<!DOCTYPE html>
26+
<html lang="ko">
27+
<head>
28+
<meta charset="UTF-8">
29+
<title>Webpack Demo</title>
30+
</head>
31+
<body>
32+
<p>Hi!</p>
33+
</body>
34+
</html>
35+
```
36+
37+
개발 서버 실행
38+
39+
```bash
40+
npx webpack serve --mode=development
41+
```
42+
43+
웹 브라우저에서 확인: <http://localhost:8080/>
44+
45+
## JavaScript 파일 분리
46+
47+
`src/index.js` 파일 작성
48+
49+
```javascript
50+
const element = document.getElementById('app');
51+
element.innerHTML = `
52+
<p>Hello, world!</p>
53+
`;
54+
```
55+
56+
`public/index.html` 파일 수정
57+
58+
```html
59+
<!DOCTYPE html>
60+
<html lang="ko">
61+
<head>
62+
<meta charset="UTF-8">
63+
<title>Webpack Demo</title>
64+
</head>
65+
<body>
66+
<div id="app">
67+
Loading...
68+
</div>
69+
<script src="main.js"></script>
70+
</body>
71+
</html>
72+
```
73+
74+
## Babel & JSX 세팅
75+
76+
```bash
77+
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react
78+
```
79+
80+
`webpack.config.js` 파일 작성
81+
82+
```javascript
83+
module.exports = {
84+
module: {
85+
rules: [
86+
{
87+
test: /\.jsx?$/,
88+
exclude: /node_modules/,
89+
use: {
90+
loader: 'babel-loader',
91+
options: {
92+
presets: ['@babel/preset-env', '@babel/preset-react'],
93+
},
94+
},
95+
},
96+
],
97+
},
98+
};
99+
```
100+
101+
또는 `webpack.config.js`와 `babel.config.js` 파일을 분리할 수 있다.
102+
103+
`webpack.config.js` 파일 작성
104+
105+
```javascript
106+
module.exports = {
107+
module: {
108+
rules: [
109+
{
110+
test: /\.jsx?$/,
111+
exclude: /node_modules/,
112+
use: 'babel-loader',
113+
},
114+
],
115+
},
116+
};
117+
```
118+
119+
`babel.config.js` 파일 작성
120+
121+
```javascript
122+
module.exports = {
123+
presets: [
124+
'@babel/preset-env',
125+
'@babel/preset-react',
126+
],
127+
};
128+
```
129+
130+
## ESLint 세팅
131+
132+
“[JavaScript 프로젝트 시작하기](https://github.com/ahastudio/til/blob/main/javascript/20181212-setup-javascript-project.md)”
133+
문서 참고.
134+
135+
```bash
136+
npm i -D eslint
137+
138+
npx eslint --init
139+
```
140+
141+
## Visual Studio Code 세팅
142+
143+
`.vscode/settings.json` 파일 작성
144+
145+
```bash
146+
mkdir -p .vscode
147+
touch .vscode/settings.json
148+
```
149+
150+
```json
151+
{
152+
"editor.rulers": [
153+
80
154+
],
155+
"editor.codeActionsOnSave": {
156+
"source.fixAll.eslint": true
157+
},
158+
"trailing-spaces.trimOnSave": true,
159+
}
160+
```

0 commit comments

Comments
 (0)