본문 바로가기

Web/React

webpack 설정하기

var webpack = require('webpack');

module.exports = {
    entry: ['react-hot-loader/patch', './src/index.js'] ,

    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: {
        hot: true, //컴포넌트가 수정 될 경우 그 수정된 부분만 리로드 해주는 부분 모듈 리로딩(“Hot Module Reloading”) 옵션
        inline: true, //전체 페이지에 대한 실시간 리로딩(“Live Reloading”) 옵션
        host: '0.0.0.0', //서버를 listen 할 주소
        port: 4000, //포트
        contentBase: __dirname + '/public/', //index 파일의 위치
    },

    module:{
        loaders: [
            {
                test: /.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react'],
                    plugins: ["react-hot-loader/babel"]
                }
            }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

'Web > React' 카테고리의 다른 글

Life Cycle  (0) 2017.12.10
Introduction to React  (0) 2017.12.10
React 기본 작업 환경  (0) 2017.02.28
package.json 설정  (0) 2017.02.28
React 강좌  (0) 2017.02.24