1. 프로젝트 생성
npm init -y
2. 관련 플러그인 설치
npm i -D webpack webpack-cli webpack-dev-server@next
npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 )
npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 )
npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 )
npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 )
npm i -D postcss autoprefixer postcss-loader ( 스타일 후처리를 도와주는 package, autoprefixer: 공급업체 접두사 생성, webpack loader )
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime ( 최신 js문법 인식 )
npm i -D babel-loader ( 바벨 로더 설치 )
3. package.json 스크립트 추가
"scripts":{
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
4. 프로젝트 구성
/node_modules
/package-lock.json
/package.json
/webpack.config.js
/.babelrc.js
/.gitignore
/.postcssrc.js
/index.html
/js/main.js
/scss/main.scss
/static/fabicon.ico
ㄴ/images/logo.png
5. ./index.html 파일 생성 및 (css reset cdn 적용, h1 태그 및 img 태그 링크 작성)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
</head>
<body>
<h1>Hello Webpack!!</h1>
<img src="./images/logo.png" alt="seaofcalm" />
</body>
</html>
5. ./js/main.js 생성
//import '../scss/main.scss' // 추후 추가. 최초 작동 테스트에는 불필요
console.log('Webpack!')
7. ./webpack.config.js 생성
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './js/main.js', // 엔트리 파일 인식. 번들링 결과물에 포함시킴
output: {
// 현재는 path와 filename이 기본값과 동일하므로 생략 가능
// path: path.resolve(__dirname, 'dist'), //절대경로 필요, 폴더명
// filename: 'main.js',
clean: true // 새로 build 시 기존 필요없는 파일/폴더 삭제
},
module: {
rules: [
{
test: /\.s?css$/, // .css 또는 scss로 끝나는 파일 인식
use: [
'style-loader', // html에 삽입해주는 역할
'css-loader', // 먼저 해석됨. js에서 css에서 인식하도록 해석
'postcss-loader', // 공급업체 접두사 적용
'sass-loader' // 가장 먼저 해석됨. js에서 scss에서 인식하도록 해석
]
},
{
test:/\.js$/,
use: [
'babel-loader' //바벨이 적용될 수 있도록 설정
]
}
]
},
plugins:[
new HtmlPlugin({
template: './index.html' // 번들링 결과물에 html을 포함시킴
}),
new CopyPlugin({
patterns: [
{ from: 'static' } // 번들링 결과물에 스태틱 파일을 포함시킴
]
})
],
devServer:{
host: 'localhost' // 서버 호스팅 주소
}
}
8. logo.png는 static/images 폴더에, fabicon.ico는 static 폴더에 넣어준다.
<body>
<h1>Hellow Webpack!!</h1>
<img src="./images/logo.png" alt="seaofcalm" />
</body>
9. ./scss/main.scss파일에서 display: flex; 조건으로 확인. index.html파일에서 main.css 파일링크는 삭제
$color--black:#000;
$color--white: #fff;
body {
background-color: $color--black;
h1 {
color: $color--white;
font-size: 40px;
display: flex;
}
}
10. main.js에 ./css/main.css 반영
main.js
import '../scss/main.scss'
console.log('Webpack!')
11. Autoprefixer 공급업체 접두사 추가 => autoprefixer 및 관련 패키지 설치 (2. 참조)
12. package.json 에 브라우저 추가
"browserslist": [
"> 1%",
"last 2 versions"
]
13. .postcssrc.js 작성
module.exports = {
plugins: [
require('autoprefixer')
]
}
14. 바벨 적용( .babelrc.js 파일 생성 )
module.exports = {
presets: ['@babel/preset-env'], // 한번에 명시
plugins: [
['@babel/plugin-transform-runtime'] //비동기 처리
]
}
15. 깃 적용( ,gitignore 파일 생성)
.cache
.DS_Store
node_modules
dist
