기존에는 React를 사용할때만 웹팩을 건드렸었는데 이번에 Pure HTML/CSS/JS로 작업하면서
웹팩을 적용시켜봤다. 참고로
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
이런식으로 추가하는 방법은 예전 방법이고 요즘에는 Pure하게 제작해도 웹팩으로 번들링해주는게 추세라고 한다.
웹팩 적용방법부터 시작해서 SCSS까지 적용해보도록 한다.
(패키지 관리자로 npm을 사용하지 않고 yarn을 사용)
먼저 아래의 명령어로 폴더를 생성하고 안으로 들어간다.
mkdir test && cd test
다음으로 yarn을 시작한다
yarn init
아래의 명령어로 웹팩을 설치한다.
yarn add webpack-cli webpack --dev
다음으로 package.json파일을 열고 아래와 같이 scripts를 정의해준다.
"scripts": {
"build": "webpack --mode production --watch",
"dev": "webpack --mode development"
}
이제 파일의 소스를 담아둘 src폴더와 실제 배포를 하기 위해 빌드했을 때 저장될 폴더인 dist를 생성한다.
mkdir src
mkdir dist
그리고 src폴더로 들어가서 index.js를 생성하고 테스트용도로 console.log(1)을 입력한다.
다음으로 최상단 루트에 index.html파일 생성 후 아래의 내용을 입력
<html>
<head>
<title>WEBPACK TEST</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
실제 빌드하면 /dist/main.js라는 파일이 생성되므로 해당 파일을 임포트 시켜줘야 한다.
이제 빌드만 하면 된다. 최상단 폴더로 들어가서 아래의 명령어로 빌드한다.
yarn build
위처럼 나온다면 정상적으로 빌드가 된 것이다.
실제 배포할때는 /dist폴더와 index.html을 배포하면 된다.
추가적으로 SCSS를 적용하는 방법에 대해 설명한다.
아래의 명령어로 로더를 설치한다.
yarn add style-loader css-loader sass-loader node-sass --dev
webpack.config.js라는 파일을 생성하고 아래의 내용을 넣는다.
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
}
}
이제 /src폴더에 style.scss라는 파일을 생성하고 CSS를 정의한이후
index.js의 최상단에서 import './style.scss'; 를 선언하면 SCSS적용이 완료된다.
+추가. Hot reload사용
yarn add webpack-dev-server
package.json에서 scripts부분을 아래와 같이 수정
"start": "webpack-dev-server --open --mode development --hot",
"build": "webpack --mode production --watch",
그리고 yarn build와 yarn start를 동시에 실행시켜놓으면 된다.
'Coding' 카테고리의 다른 글
| 도커(Docker) 완전삭제 명령어 (0) | 2018.12.11 |
|---|---|
| 맥북(OS X) Sublime Text Python3 적용하는 방법 (0) | 2018.11.05 |
| Git flow와 branch merge에 대해서 (0) | 2018.08.14 |
| VSCode sFTP 연동하는 방법 (0) | 2018.06.03 |
| 우분투 SSH 세션 Timeout 설정하는 방법 (0) | 2018.04.05 |
