본문 바로가기

코딩/Today I Learn

12.28일 화 공부

728x90

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 명령어 실행하면 

assets/js에 main.css파일이 새로 생성된걸 볼 수 있음

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를 위해 파일명을 수정해야 함

filename옵션 이용할 것임

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

각각 css, js에 저장됨 

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