MODE, LOADER - WEBPACK

const path = require('path')

module.exports = {

    mode: "development",   // 이 부분을 추가하면 개발 모드로 변환가능 'production' 완성 모드

    entry: "./source/index.js",

    output: {

        path: path.resolve(__dirname, "public"),

        filename:'index_bundle.js'

    }

}

webpack은 JS가 아닌 다른 것 또한 번들링을 해준다.

그것을 도와 주는것이 LOADER이다

 

CSS 로더 STYLE 로더

npm install --save-dev(-D와 같음) style-loader css-loader 명령어를 활용하여 설치를 해준다.

    module: {

        rules: [

            {

                test:/\.css$/,

                use:[

                    'style-loader', // <<2. 그 것을 받아서 웹페이지의 style태그안에 넣어주는 역할을 한다

                    'css-loader' // <<1. 이부분이 index.js에 css를 찾아서 웹펙으로 가져오고

                ]

            }

        ]

    }

뒤에 있는 loader가 먼저 실행되는 것에 주의한다 !!