webpack - style 설정

webpack 5. 사용
style-loader, css-loader
자세한 코드보기(git)

---

[webpack.config.js]

 {loader:'css-loader', options: {modules: true}
//  module -> true 가 되어야 모듈의 형태로 css파일을 import할 수 있다. 

• css-loader: css파일을 읽어서 jsx로 변환
• style-loader: css의 내용을 jsx로 밀어넣는 역할
• css-loader,style-loader는 함께 쓰여야한다.
• module -> true 가 되어야 모듈의 형태로 css파일을 import할 수 있다.

---

Style

[webpack.config.js - loader]

module: {
        rules: [{
            test: /\.(png|gif|jpe?g|ico|tiff?|bmp|svg)$/i,
            type: 'assets/resource'
        },{
            test: /\.(sa|sc|c)ss$/i, // 대소문자 구분없이 .css로 끝나는 것
            use: ['style-loader','css-loader', 'sass-loader'] // inline과 css파일 로더 
        }]
    },

• 개발 환경(src)과 배포 환경(public)을 분리해야한다.
• loader : sass, coding : scss
• file-loader는 bundling시에 src/assets의 파일을 public/asset으로 hash처리된 이름으로 옮긴다. 사용 시에는 그곳의 url을 반환하여 적용시킨다.

---

[build와 debug]

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "npx webpack serve --progress --mode development",
    "build": "npx webpack --mode production"
  },

• src->wds->service : debug (개발)
• src->public(bundling) : build (배포)

build시 asset파일 위치 지정

    output:{
        // 번들링 위치와 번들 파일명 지정
        path: path.resolve('public'),
        filename: 'bundle.js', 
        // asset의 위치 지정 (빌드시 src의 파일이 옮겨지는 위치)
        assetModuleFilename: 'assets/images/[hash][ext]'
    },

---

[default webpack.config.js 설정]

// common js 방식으로 
// 소스는 ES6 방식 

const path = require('path');

module.exports = {
    mode: "none",
    entry: path.resolve('src/index.js'),
    output:{
        // 번들링 위치와 번들 파일명 지정
        path: path.resolve('public'),
        filename: 'bundle.js', 
        // asset의 위치 지정 (빌드시 src의 파일이 옮겨지는 위치)
        assetModuleFilename: 'assets/images/[hash][ext]'
    },
    module: {
        rules: [{
            test: /\.(png|gif|jpe?g|ico|tiff?|bmp|svg)$/i,
            type: 'asset/resource' // webpack이 정한 타입
        },{
            test: /\.(sa|sc|c)ss$/i, // 대소문자 구분없이 .css로 끝나는 것
            use: ['style-loader','css-loader', 'sass-loader'] // inline과 css파일 로더 
        }]
    },
  	devtool: "eval-source-map",
     devServer: {
        contentBase: path.resolve('public'),
        watchContentBase: true,
        host: "0.0.0.0",
        port: 9999,
        inline: true,
        liveReload: true,
        hot: false,
        compress: true,
        historyApiFallback: true
    }

}

---

• build시, 개념적으로 파일은 옮겨지고 css는 자바스크립트로 변해서 적용된다.
• debug시, build를 하지 않더라도 WDS의 메모리 안에서 처리되어 실행된다.

---

[.gitignore]

**/node_modules
**/public/assets
**/public/bundle.js
**/public/main.js

• Git에 올릴 때에 빌드 파일은 올라가지 않도록 설정
• src파일을 올리고, 받아서 새로 빌드를 하면 된다.