webPack
JS를 pug파일에서, client쪽에서 사용할 수
있게 compile해 주는 library.
여기서는
sass와 Js를 client에서, pug파일에서
사용할 수 있게 webPack을 해 준다.
sass는 css로 변환하고 css를 client에서
사용할 수 있게 webpack을 한다.
!!!참고로 react나 next.js를 설치하면, 자동적으로 webpack이
깔려있음.
공식문서
https://webpack.js.org/
https://webpack.js.org/loaders/css-loader/
https://webpack.js.org/loaders/style-loader/
"devDependencies": {
"@babel/core": "^7.19.3",
"@babel/node": "^7.19.1",
"@babel/preset-env": "^7.19.4",
"babel-loader": "^9.0.1",
"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.6.1",
"nodemon": "^2.0.20",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}그 외 npm i -D 모드로 npm 해 줘야 하는 것들.
1. webpack.config.js
src폴더가 아니고 root폴더에 위치해야 함.
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
///scss를 css로 css가 front에 적용될 수 있게 compile해주는것.
const path = require('path')
///경로 사용을 위해 path를 불러준다.
module.exports = {
entry: {
main: './src/client/js/main.js',
videoPlayer: './src/client/js/videoPlayer.js',
},
///js파일을 pug(front)에 적용시키기 위한 js파일들이
///위치할 곳,
plugins: [
new MiniCssExtractPlugin({
filename: 'css/styles.css',
}),
],
///css파일이 front에 적용될 수 있게 compile해주는 작업
///filename은 assets폴더의 css의 styles.css임.
mode: 'development',
///mode를 반드시 development로 설정해 줄것
watch: true,
///front의 nodemon임. restart할 필요 없음.
///이 설정이 없으면 scss파일 추가할 떄마다,
///npm run dev:assets를 실행시켜야 함.
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'assets'),
clean: true,
},
///js파일 작성 후, js파일에 compile되는 위치 지정.
///filename을 위와 같이 지정하면,
///위에서 entry에서 만든 파일(main.js, videoPlayer.js)들이
///아래의 사진에 보든이 root위치에 compile되어서, 생성됨.
///아래 사진 참고.
///path.resolve(__dirname, assets)는 현재 위치에서의
///assets폴더를 의미함.
///console로 __dirname찍어보면, jmtube로 찍힘.
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env']],
},
},
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
}
///여기서 module은 두개가 loader되어 있음.
///1. js를 compile하는 babel-loader
///2. scss를 compile하는 3개!!
///js와 scss 적용을 위해서는 위와같이 module를 설정해 주어야 함.
2. client
위와 같이 client폴더, 아래 js, sass폴더를 만들고
scss폴더안에 _variables.scss, styles.scss 폴더를 만든다.
2-1. src/client/js/main.js
import '../scss/styles.scss'
alert('hi')scss폴더의 styles.scss 파일을 import한다.
2-2. src/client/scss/_variables.scss
$red: red;
$green: green;2-3. src/client/scss/styles.scss
styles 파일은 _variables.scss 파일을 import 한다.
@import './_variables';
body {
background-color: $red;
color: $green
}3. src/server.js
app.use(localsMiddleware)
app.use('/uploads', express.static('uploads')) //'/uploads' path로 uploads폴더에 접근허락해조
app.use('/static', express.static('assets')) //'/assets' path로 assets폴더에 접근허락해줌
///위와 같이 static을 사용해 /static path로 접근하면,
///assets폴더에 접근가능해지게 설정한다.
app.use('/', rootRouter)
app.use('/videos', videoRouter)
app.use('/users', userRouter)
4. package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev:assets": "webpack --config webpack.config.js",
"dev:server": "nodemon"
}, 1.npm run dev:assets 를 치면, webpack이 실행되게 스크립트를 만들어놓는다.
2. webpack은 client부분이기 때문에, 개발시,
반드시, npm run dev:assets, npm run dev:server
두개를 실행시켜 놓아야함. assets는 server돌리는 부분
3. server돌리는 부분이 dev:server로 바뀐이유는, nodemon이
front부분이 바뀔때는 신경쓰지 않게 하기 위해서임.
아래 파일로 나머지 스크립트 대체된다.
5.nodemon.json(root 위치임)
{
"ignore": ["webpack.config.js", "src/client/*", "assets/*"],
"exec": "babel-node src/server.js"
}
- exec는 실행 스크립트,
- igonre는 front부분에서 변화 생겨도 server재실행 안시킴.
6. gitigonre
/uploads
/assets
부분은 gitignore부분에 추가시킨다.
7. base.pug
위와 같은 설정으로 front에서 JS및 Scss를 사용할 수 있음.
사용부분 참고!!
doctype html
html(lang="ko")
head
//block head
title #{pageTitle} | JmTube
link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
///맨처음 설정했던 mvp는 없애준다.아래styles.css를
///적용할 예정이라.
link(rel="stylesheet" href="/static/css/styles.css")
///static/css path로 styles.css를 불러들임..
///scss가 css로 ompile되서 담기는 파일임.
body
header
h1=pageTitle
nav
ul
li
a(href='/') Home
li
a(href='/search') Search
if loggedIn
li
a(href='/users/edit') Edit Profile
li
a(href='/users/logout') Logout
li
a(href=`/users/${loggedInUser._id}`) #{loggedInUser.email}의 Profile
li
a(href='/videos/upload') Upload Video
else
li
a(href='/join') Join
li
a(href='/login') Login
main
block content
include partials/footer.pug
script(src='/static/js/main.js')
///Js 문법 사용시 static.js path를 통해서,
///compile된 main.js 파일을 사용하게 됨.
/// '/static'path는 server.js에서 만들었음.
/// '/static path로 접근하면, assets폴더를 열어주게끔~
