New Score :0
High Score :0
Run Best
NICE BUSINESS TYPE INDICATOR
3. 급전을 친구에게 빌렸는데 오늘이 돈을 주기로 한날.. 그런데 카드값을 내야하는 날도 오늘인데... 이걸 어쩌나...
4. 우리 회사는 중요한 의사 결정을 할때?
5. 열심히 일한 나를 위한 선물을 주고싶다. 어떤게 좋을까?
6. 은행에서 투자상품을 추천받았다. 어떤걸 가입하지?
7. 회사에서의 나는?
8. 꿈에서 깨어나니 20년 전으로 돌아갔다. 당신이 제일 먼저 하는일은?
9. 내가 인사 담당자라면 신규 입사자 채용 시 제일 중요하게 보는것은?
10. 회사에 정말 싫어하는 동료가 있다면?
11. 가난한 집의 가장이 되었다.. 자녀의 생일 날 선물은?
12. 평소 회사 출근 스타일은?
13.회사 체육대회 하는 날이다. 오늘 뭐하지?
14. 나의 업무 스타일은?
웹팩에 대한 설명은 아래를 참고하시면 됩니다.
2020/06/30 - [언어/JavaScript] - webpack 이란
webpack 이란
webpack이란, 모듈화한 여러 개의 파일을 모아 주는 번들러입니다. 번들러는 이 외에도 'Rollup'과 'Parcel'이 있습니다. 모듈화한 파일 결합은 단순하게 파일을 결합하는 것이 아니며, 모듈의 의존 상�
codeparadise.tistory.com
개발에 사용된 개발 도구는 vsCode입니다.
vsCode에 대한 설명은 아래를 참고하시면 됩니다.
2020/06/21 - [Tool/vsCode] - [vsCode] vsCode란?
[vsCode] vsCode란?
Visual Studio Code는 가볍고 강력한 소스 코드 편집기로 데스크톱에서 실행되며 Windows, MacOS 및 Linux에서 사용할 수 있습니다. JavaScript, TypeScript, Node.js에 대한 내장된 지원과 함께 제공되며, 다른..
codeparadise.tistory.com
이번 설명에서 사용될 플러그인들 입니다.
- webpack
- webpack-cli
- html-webpack-plugin
- html-loader
- webpack-dev-server
- babel-loader
- node-sass
- style-loader
- css-loader
- sass-loader
- mini-css-extract-plugin
우선 프로젝트 상위 폴더로 이동합니다.
NPM 설정파일을 생성 해줍니다.
npm init -y
실제 템플릿이 될 폴더를 생성해줍니다.
mkdir src
이번 구성에 필요한 웹팩 플러그인들을 설치해줍니다.
# html loader 웹팩 플러그인 설치 -D는 디펜던시 포함 설치
npm i -D html-webpack-plugin html-loader
# 웹팩 테스트 서버 플러그인 설치
npm i -D webpack-dev-server
# 바벨 설치
npm i -D @babel/core babel-loader @babel/preset-env
# 이미지 파일 읽을 수 있는 플러그인 설치
npm i -D file-loader
# scss, style, css을 읽을 수 있는 플러그인 설치
npm i -D node-sass style-loader css-loader sass-loader mini-css-extract-plugin
src 폴더 내에 index.html을 생성해줍니다. 메인 html이 될 파일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/a.jpg">
</body>
</html>
src 폴더 내에 index.js 파일을 생성해줍니다. js 메인이 될 파일입니다.
import { bro } from './bro';
import './styles/main.scss'
console.log(bro('Dude'))src 폴더 내에 images 폴더를 생성하여 이미지를 넣어줍니다. 저는 a.jpg라는 파일을 넣었습니다.
src 폴더 내에 styles 폴더를 생성하여 main.scss 파일을 생성해줍니다.
$bg: red;
body {
background: $bg;
}
작업 폴더의 루트 최상위 폴더에 webpack.config.js파일을 생성해줍니다.
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.png|svg|jpg|gif$/,
use: [
'file-loader'
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
HtmlWebPackPlugin : html 웹팩 플러그인을 불러옵니다.
MiniCssExtractPlugin : css를 js 로 변환해줄 플러그인을 불러옵니다.
rules 내 설정에 대한 설명입니다.
-
js : 바벨을 적용하는 설정입니다.
-
html : 파일 압축을 설정합니다. 해당 옵션이 적용되면 메인 js도 자동으로 호출합니다.
-
png|svg|jpg|gif : 이미지 외 파일들을 호출할 설정을 합니다. 추가로 다른 확장자 파일을 추가하고 싶다면 추가하셔도됩니다.
-
scss : 스타일 파일을 설정합니다.
use는 해당 파일에 사용할 플러그인을 설정하는겁니다.
plugins 설정은 어떤 파일을 불러와서 어떤 형식으로 생성할지에 대한 설정입니다.
추가로 메인 js에서 참조할 bro.js입니다. 위치는 src 안에 생성했습니다.
const bro = (greeting) => {
return `${greeting}, bro`
}
export { bro }
그 외 웹팩 빌드 및 개발 서버 구동을 위한 설정을 packge.json에 추가합니다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start:dev": "webpack-dev-server"
}복사하기 좋게 텍스트도 넣어뒀습니다.
모든 설정이 끝나면 빌드 후 개발 서버를 구동합니다.
# npm빌드
npm run build
# 웹팩 테스트 서버 구동
npm run start:dev
서버 구동하면 로그에 주소가 나오며 해당 주소를 브라우저로 접속하여 설정이 잘 적용되었는지 확인하시면 됩니다.
필자는는 http://localhost:8081/로 접속했습니다.
서버가 구동하고 있을시 [WDS] Live Reloading enabled. 콘솔로그에 노출됩니다.
서버가 도중에 끊기면 [WDS] Disconnected! 로그가 나타납니다.
