main.js에 자바스크립트와 같이 실행되는게아니라
따로 분리하고싶음
https://github.com/webpack-contrib/mini-css-extract-plugin
mini-css-extract-plugin
1.설치
npm install --save-dev mini-css-extract-plugin
2.설정
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports ={
entry: "./src/client/js/main.js",
plugins: [new MiniCssExtractPlugin()],
mode: 'development',
output:{
filename: "main.js",
path: path.resolve(__dirname,"assets","js"),
},
module:{
rules:[
{
test:/\.js$/,
use:{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
},
{
test: /\.scss$/,
use:[MiniCssExtractPlugin.loader, "css-loader","sass-loader"], //"style-loader"를 대체
}
]
}
}
3.npm run assets 명령어 실행하면

module.exports ={
entry: "./src/client/js/main.js",
plugins: [new MiniCssExtractPlugin()],
mode: 'development',
output:{
filename: "js/main.js", //파일명에 js/추가함
path: path.resolve(__dirname,"assets","js"), / 아웃풋이 모두 js폴더에 들어가기 때문에 /모두 js에 넣으면 안되니까 "js"삭제
},
assets파일 삭제후 npm run assets실행하면

main.js는 js폴더에 들어간 것을 알수있음
css를 위해 파일명을 수정해야 함

module.exports ={
entry: "./src/client/js/main.js",
plugins: [new MiniCssExtractPlugin({
filename: "css/styles.css",
})],

base.pug에 파일 로드하기위하여
link (rel =stylesheet href="static/css/styles.css")
assets 파일을 매번 실행하기전 오래된 복사본이남아있기도 하니까삭제하고 시작하고
프론트엔드 자바스크립트에서 매번 변경할 때마다 npm run assets를 명령하기 귀찮음
watch 라는 function
refresh,compile담당
module.exports ={
entry: "./src/client/js/main.js",
mode: 'development',
watch: true,
plugins: [new MiniCssExtractPlugin({
filename: "css/styles.css",
})],
또다른 옵션
output folder를 build하기 전에 clean 해주는 것
module.exports ={
entry: "./src/client/js/main.js",
mode: 'development',
watch: true,
plugins: [new MiniCssExtractPlugin({
filename: "css/styles.css",
})],
output:{
filename: "js/main.js",
path: path.resolve(__dirname,"assets"),
clean:true,
},
//output filename: xxx/main.js로 바꾸고 webpack 재시작하면
폴더가 js/main.js삭제되고 xxx/main.js로바뀐다.
front-end가바뀐다고 back-end재시작 원하 지않어 --> nodemon 변경하자
webpack.config.js수정한다고 back-end가 재시작하는거 x x
nodemon에게 몇가지 폴더나 파일을 무시하는 방법을 알아보자
nodemon.json파일생성
https://www.npmjs.com/package/nodemon
{
"verbose": true,
"ignore": ["*.test.js", "fixtures/*"],
"execMap": {
"rb": "ruby",
"pde": "processing --sketch={{pwd}} --run"
}
}
{
"ignore":["webpack.config.js", "src/client/*","assets/*"],
"exec": "babel-node src/init.js",
}
package.json에는
"scripts": {
"dev:server": "nodemon -L --exec babel-node src/init.js", //nodemon만 호출해도 알아서 nodemon.json 호출하여 실행함
"dev:assets": "webpack --config webpack.config.js" //알아서 webpack.config.js 호출하여 실행
},
--> webpack, client assets등파일에서 저장해도 서버 재시작하지 않아
+.gitinore 에 /assets폴더 추가 올릴 필요가 없음
base.pug 폰트어섬 cdn 추가
scss 폴더에 config 폴더 만들어서 variables. reset.scss 등을 넣어줌
Reset CSS
https://meyerweb.com/eric/tools/css/reset
FontAwesome CDN
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
partials, mixins에 파일만들면 예)header.pug
scss/components에도 파일만들어 scss 파일 예)header.scss
scss
변수도 쓸 수있고
a{
dfdsfsdd
&:hover{
}
}// = a{} a:hover{}
body{
a{
}
}// =body{} body a{}
'코딩 > Today I Learn' 카테고리의 다른 글
1/03 공부 (0) | 2022.01.03 |
---|---|
12.29수 공부 (0) | 2021.12.29 |
12.23공부 (0) | 2021.12.23 |
12.22공부 프론트엔드 시작 (0) | 2021.12.22 |
12.21 공부 (0) | 2021.12.22 |