YHole
on
Aug 20, 20212021-08-20T00:00:00+09:00
Updated
Aug 29, 20212021-08-29T21:50:26+09:00
7 min read
webpack
설치와 설정
1
2
3
| npm init -y
npm i -D webpack webpack-cli webpack-dev-server@next
# @next를 붙이는간 cli와 버전을 맞추기위함
|
- npm run 으로 실행할 개발서버 및 빌드 명령 설정
1
2
3
4
| "scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
|
공식 문서에 더 많은 옵션 설명이 있다
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
| // import
const path = require('path')
// 전역 모듈 'path'
module.exports = {
// parcel index.html 처럼
// 파일을 읽어들이기 시작하는 진입점 설정
// 웹팩은 js 파일을 진입점으로 한다
entry: './js/main.js',
// 결과물(번들)을 반환하는 설정
output: {
// 절대 경로
// 첫번째 인수와 두번째 인수를 합쳐줌 경로+경로
// __dirname은 현재 webpack config파일의 경로
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
// path와 filename 을 주석처리해도 된다
// defalut값이 (dist, main.js)
// 빌드 실행시 기존 파일 지우고 생성
clean: true
},
}
|
플러그인
main.js를 index.html 이랑 연결해서 개발 서버를 여는 방법
1
| npm i -D html-webpack-plugin
|
1
2
3
4
5
6
7
8
9
10
11
12
| const HtmlPlugin = require('html-webpack-plugin')
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
plugins: [ // main.js 와 html이 연결됨
new HtmlPlugin({
template: './index.html'
}),
],
// 서버 실행시 주소가 이상하게 나오지 않게 로컬호스트 지정
devServer: {
host:'localhost'
}
|
static 내부에 favicon , images폴더 가 들어있는 구조
1
| npm i -D copy-webpack-plugin
|
1
2
3
4
5
6
7
8
9
| const CopyPlugin = require('copy-webpack-plugin')
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
plugins: [
new CopyPlugin({
patterns: [ // static이 dist에 copy됨
{ from: 'static' }
]
})
],
|
스타일 시트 가져오기
- html이 아닌 js로 연결해놓고
-
js와 html을 연결해서 가져온다
- js는 단순히 css를 가져오기만 한다
1
| import '../css/main.css'
|
1
| npm i -D css-loader style-loader
|
- webpack.config.js도 설정 해준다
1
2
3
4
5
6
7
8
9
10
11
12
13
| // css 읽어오기
module: {
rules: [
{
// .css로 끝나는 모든 것
test: /\.css$/,
use: [
'style-loader', // 해석된 부분을 삽입해서 사용
'css-loader',// 먼저 로드됨 js에서 css를 해석하는 용도
]
}
]
},
|
1
| import '../scss/main.scss'
|
1
2
| # scss가져오고 읽으려면
npm i -D sass-loader sass
|
- webpack.config.js도 설정 해준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| module: {
rules: [
{
// .css로 끝나는 모든 것 + ? 니까 scss 도 가능
test: /\.s?css$/,
use: [
'style-loader', // 해석된 부분을 삽입해서 사용
'css-loader',// 먼저 로드됨 js에서 css를 해석하는 용도
'sass-loader' // css로드가 로드되기전에 먼저 로드되야됨 (먼저 동작해야됨)
]
},
]
},
|
autoprefixer
postcss 후처리기에서autoprefixer사용
1
| npm i -D postcss autoprefixer postcss-loader
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| module: {
rules: [
{
// .css로 끝나는 모든 것 + ? 니까 scss 도 가능
test: /\.s?css$/,
use: [
'style-loader', // 해석된 부분을 삽입해서 사용
'css-loader',// 먼저 로드됨 js에서 css를 해석하는 용도
// postcss-loader 적용시에는 packagejson에 browserslist 명시가 필요
// .postcssrc도 작성
'postcss-loader',// 순서 중요 scss에 공급업체 접두사 붙임
'sass-loader' // css로드가 로드되기전에 먼저 로드되야됨 sass 해석 (먼저 동작해야됨)
]
},
]
},
|
- postcss-loader 적용 후 브라우저 설정
1
2
3
4
| "browserslist": [
"> 1%",
"last 2 versions"
]
|
1
2
3
4
5
| module.exports = {
Plugins: [
require('autoprefixer')
]
}
|
babel
1
| npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
|
1
2
3
4
5
6
| module.exports = {
presets: ['@babel/preset-env'], // 일일이 명시해야되는 자바스크립트의 기능을 한번에 프리셋
plugins: [
['@babel/plugin-transform-runtime']
] //비동기처리를 위해 사용
}
|
- 바벨 패키지설치해서 바벨이 동작할수있게 되었는데
그걸 해석하기 위한 매개체
1
2
3
4
5
6
| {
test: /\.js$/,
use: [
'babel-loader'
]
}
|
Netlify
1
2
3
4
5
| 빌드 커맨드
npm run bulid
퍼블리쉬 디렉토리
dist/
|
npx degit
1
| npx degit iamidlek/레포이름 다운받을폴더명
|
- 클론과 다르게 커밋등의 내용이 없다
(zip파일로 다운받는것과 동일)
- 템플릿 다운 용도로 적절
헷갈림 포인트
웹팩 역시 필요한 상황이나 빌드까지의 흐름을 경험하지 않으면
한번에 설정이나 그런 필요성이 와닿지 않는 것 같다
다만 parcel 과 webpack 설정 강의를 들으니 어느정도 사용법이나
어떤 설정이 어떤 역할을 하는지 알게 되는 것 같다
