React, Babel 그리고 Webpack 설정 정리

peter park·2019년 10월 3일
0

정리

namedescription
babeles5 -> es6
.babelrcconfiguration + compiler
@babel/corees5 -> es6
@babel/preset-reactreact preset
@babel/preset-envbrowser compiler
babel-loader
-
webpackbuild one javascript file
webpack.config.jswebpack configuration
webpack-dev-serverlive reloader
webpack-cliwebpack command
html-webpack-plugincreate html with output.jsW
-
npm initpackage.json
reactreact library
react-dombrowser + dom + webapp

webpack.config.js

const path = require('path')                                        // core nodejs 모듈 중 하나, 파일 경로 설정할 때 사용
const HtmlWebpackPlugin = require('html-webpack-plugin')            // index.html 파일을 dist 폴더에 index_bundle.js 파일과 함께 자동으로 생성, 우리는 그냥 시작만 하고싶지 귀찮게 index.html 파일까지 만들고 싶지 않다.!!

module.exports = {                                      // moduel export (옛날 방식..)
    entry: './src/index.js',                            // 리액트 파일이 시작하는 곳
    output: {                                           // bundled compiled 파일
        path: path.join(__dirname, '/dist'),            //__dirname : 현재 디렉토리, dist 폴더에 모든 컴파일된 하나의 번들파일을 넣을 예정
        filename: 'index_bundle.js'
    },
    module: {                                           // loader를 module object에 넣을 예정
        rules: [
            {
                test: /\.js$/,                          // .js, .jsx로 끝나는 babel이 컴파일하게 할 모든 파일
                exclude: /node_module/,                 // node module 폴더는 babel 컴파일에서 제외
                use:{
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'                // 생성한 템플릿 파일
        })
    ]
}

위의 설정들을 크게 살펴보자

namedescription
path파일의 경로를 지정
HtmlWebpackPlugin컴파일 이후 index.html 파일을 생성
module.export출력할 모듈
-
entry컴파일 할 파일
output컴파일 이후 파일
module모듈의 컴파일 형식
plugin사용할 plugins
profile
Let's make something happen 👨🏻‍💻🌿

0개의 댓글