npm init -y
npm i -D webpack webpack-cli webpack-dev-server@next
// package.json
{
"name": "webpack-template-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.0.0-rc.1"
}
}
index.html 파일생성
https://www.jsdelivr.com/package/npm/reset-css (css 초기화)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
js/main.js 생성
webpack.config.js 생성
// webpack.config.js
// import
const path = require('path')
// export
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './js/main.js',
// 결과물(번들)을 반환하는 설정
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}
npm run build
⇒ dist/main.js 생성
// webpack.config.js
const path = require('path')
module.exports = {
entry: './js/main.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'app.js'
}
}
npm run build
⇒ public/app.js 생성
// webpack.config.js
const path = require('path')
module.exports = {
entry: './js/main.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'main.js'
}
}
npm run build
⇒ public/app.js 생성
⇒ public/main.js & public/app.js 모두 있어서 문제 발생!
// webpack.config.js
const path = require('path')
module.exports = {
entry: './js/main.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'main.js',
clean: true,
}
}
npm run build
⇒ public/app.js 삭제됨
// webpack.config.js
const path = require('path')
module.exports = {
entry: './js/main.js',
output: {
// 생략해도 동일하게 동작!
// path: path.resolve(__dirname, 'dist'),
// filename: 'main.js',
clean: true,
}
}
public, dist 폴더 삭제
npm run build
⇒ dist/main.js 생성
⇒ DOCUMENTATION ⇒ Configuration
⇒ Entry and Context ⇒ entry
⇒ Output ⇒ output.path
npm i -D html-webpack-plugin
// webpack.config.js
// import
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
// export
module.exports = {
entry: './js/main.js',
output: {
clean: true
},
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
new HtmlPlugin({
template: './index.html'
})
]
}
npm run dev
// webpack.config.js
],
devServer: {
host: 'localhost'
}
}
npm run dev
logo.png , favicon.icon ⇒ 프로젝트 폴더
static 폴더 생성
favicon.icon ⇒ static 폴더로 이동
static/images 생성
logo.png ⇒ static/images
<!-- index.html -->
<body>
<h1>Hello Webpack!!</h1>
<img src="./images/logo./png" alt="hamburger" />
</body>
npm i -D copy-webpack-plugin
// webpack.config.js
// import
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
// export
module.exports = {
entry: './js/main.js',
output: {
clean: true
},
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' }
]
})
],
devServer: {
host: 'localhost'
}
}
npm run dev
npm run build
⇒ dist 폴더 안에 파일들 생성
<!-- index.html -->
<link rel="stylesheet" href="./css/main.css" />
static/css/main.css 생성
/* static/css/main.css */
body {
background-color: orange;
}
css 폴더 ⇒ 최상위 경로로 이동
// js/main.js
import '..css/main.css';
npm i -D css-loader style-loader
// webpack.config.js
...
module.exports = {
...
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
...
}
npm run dev
css/main.css ⇒ scss/main.scss 이름변경
// js/main.js
import '../scss/main.scss';
// webpack.config.js
...
module.exports = {
...
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
...
}
npm i -D sass-loader sass
/* scss/main.scss */
$color--black: #000;
$color--white: #fff;
body {
background-color: royalblue;
h1 {
color: $color--white;
font-size: 40px;
}
}
npm run dev
npm i -D postcss autoprefixer postcss-loader
// webpack.config.js
...
module.exports = {
...
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
}
]
},
...
}
// package.json
"browserslist": [
"> 1%",
"last 2 versions"
]
.postcssrc.js 파일 생성
// .postcssrc.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
npm run dev
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
.babelrc.js 파일 생성
// .babelrc.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}
// webpack.config.js
...
module.exports = {
...
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.js$/,
use: [
'babel-loader'
]
}
]
},
...
}
npm i -D @babel-loader
rm -rf .git
git 삭제
git remote remove origin
git 연결 해제
git remote -v
git 연결된 저장소 확인
.gitignore 파일 생성
// .gitignore
.cache
.DS_Store
node_modules
dist
git init
버전 관리 초기화
git status
기본 목록 확인
git add .
버전 관리 시작
git status
변경내역 확인
git commit -m "Create project"
커밋 & 메시지
git log
확인
github 저장소 생성
git remote add origin 원격저장소주소
저장소 연결
git push origin master
저장소 업로드
⇒ login
⇒ Add new site
⇒ Import an existing project
⇒ Github
⇒ pick a repository
⇒ Basic build settings
→ Build command(npm run build) / Publish directory(dist/)
⇒ Deploy site
VS code 새창으로 열기
터미널
ls
cd desktop
npx degit universe-ys/webpack-template-basic webpack-template-test
degit? github 에 있는 프로젝트를 (버전관리 없이) 가져옴 → 새로운 프로젝트를 만들 수 있음!
webpack-template-test 폴더가 생성됨
ls
cd webpack-template-test
code . -r
현재 경로에 프로젝트를 오픈
또는
저장소 ⇒ code ⇒ download.zip