Webpack 및 Webpack 설정

한마디로 파일들을 관리해주는 도구

왼쪽의 각 파일들을 컴파일하고 번들링하여 세팅해둠

jpg파일을 필요로할때 불러오는 방식은 오른쪽에 세팅되어있으니  쉽게 가져올수있다

여러파일을 하나의 종류로 묶어서 번들링한다 ex) sass, less, css는 다 .css로 묶음

WebPack 설정 예시

---

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    entry: './src/index.js', // 빌드 할 파일

    output: { // 빌드 후 생상된 파일 세팅

        path: __dirname + '/dist', // 생성된 파일 위치 설정,_dirname 은 node 변수로 현재 디렉터리 경로

        filename: 'index_bundle.js', // 생성된 파일 명

    },

    mode: 'development', // 웹팩 모드 설정 development, production, none

    module: { // 모듈 생성 규칙 설정 

        rules: [ // 컴파일 설정

            {

                test: /\.js$/,  // js 파일들을 컴파일

                exclude: /node_modules/, // node_modules를 제외하고

                use:{

                    loader: 'babel-loader'  // 바벨로더를 이용

                }

            },

            {

                test: /\.html$/,  // html 파일들을 컴파일

                use: [

                    {

                        loader: "html-loader", // html-loader 를 이용

                        options: { minimize: true}

                    }

                ]

            }

        ]

    },

    plugins: [ // 사용할 플러그인

        new HtmlWebpackPlugin({

            template: './public/index.html',

        })

    ],

    devServer: { // 개발서버 설정

        port: 3001,

historyApiFallback: true,

historyApiFallback: { // 진입 시 라우팅 설정 가능

rewrites: [

{ from: /^\/$/, to: './dist/index.html'}

]

}

    }

}