Reactjs + express + webpack4

 

github.com/lkm36486938/react-express-webpack4

lkm36486938/react-express-webpack4

순수 개발환경

 

1. CRA 로 리액트 앱 만들기

 

2. npm i 로 모듈들 설치

npm i -D express html-webpack-plugin nodemon webpack webpack-cli webpack-dev-middleware webpack-dev-server webpack-hot-middleware webpack-merge babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-0 html-loader webpack-bundle-analyzer

 

3. webpack 설정파일 편집

 

// webpack.common.js    (통합설정)

/* plugins */
const HTMLWebPackPlugin = require('html-webpack-plugin');

/* other */
const path = require('path');

/* constants */
const outputDirectory = 'dist';

module.exports = {
    // 명시된 파일을 기준으로 의존성 트리를 만들어 하나의 번들파일을 만들어 내게 된다.
    /* 아래의 코드는 이 코드의 축약본.. 그래서 번들링 결과물이 default로 main. 으로 시작하게됨.
    entry: { 
        main: './path/to/my/entry/file.js' 
    }
    */
    entry: './src/index.js', // 다른모듈을 사용하고 있는 최상위 자바스크립트 파일을 적어준다.

    // 결과물이 어떻게 나올지 설정한다.
    output: {
        path: path.resolve(__dirname, outputDirectory), // output으로 나올 파일이 저장될 경로
        publicPath: '/', // prefix 개념. 배포 시 파일들이 참조할 URL 경로
        filename: '[name].js', // entry 에서 지정한 [alias] 대로 결과물이 나온다.
    },

    // loaders (파일을 해석하고 변환하는 과정에 관여)
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            minimize: true,
                        },
                    },
                ],
            },
        ]
    },


    // 모듈을 어떻게 로드해 오는지 설정
    resolve: {
        modules: ['node_modules'], // 설치된 라이브러리를 가져올 때 검색기준이 될 경로
        extensions: ['.js', '.json', '.jsx', '.css'], // 모듈을 가져올 때 웹팩이 확장자를 처리해줌
    },

    // 부가 플러그인들 (결과물의 형태에 관여)
    plugins: [
        new HTMLWebPackPlugin({
            template: path.resolve(__dirname, 'public', 'index.html'),
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],

    optimization: {
        minimize: true
    }
}

 

// webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        port: 8000,
    }
})

 

// webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'production'
})

 

4. 바벨설정파일 편집

 

// .babelrc

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-react-jsx"
    ]
}

5. package.json 구동 스크립트 편집

 

"scripts": {
    "start": "webpack --config ./webpack.prod.js",
    "dev": "webpack-dev-server --config ./webpack.dev.js"
  },

 

여기까지하면 webpack-dev-server 로 프로젝트를 구동시킬 수 있고, webpack 번들링까지 된다.

 

 

Express 적용 

- 배포용 세팅.

 

webpack 이 배포용 번들링결과물을 만들어주면 서버에서 결과물을 보여줘야 한다.

웹프레임워크인 express.js 를 사용.

 

1. server.js 편집

const express = require('express');
const app = express();
const path = require('path');

const root = path.resolve(__dirname, 'dist');
const port = 3000;

app.use(express.static(root)); // 정적파일을 제공한다.
app.use(express.json()); // json 페이로드 구문을 분석한다 (body-parser 기반)

app.get('*', (req, res) => {
  res.sendFile(path.resolve(root, 'index.html'))
})

app.listen(port, () => {
  console.log(`App listening at port: ${port}.`);
});

 

2. package.json 구동 스크립트 편집

 

  "scripts": {
    "start": "npm run build && nodemon ./server.js",
    "build": "webpack --config ./webpack.prod.js",
    "dev:webpack": "webpack-dev-server --config ./webpack.dev.js --progress",
    "dev:express": "nodemon ./server.dev.js"
  },

start : 배포 시 사용할 스크립트

build : 빌드만 해주는 스크립트

dev:webpack : webpack-dev-server 를 사용한 개발용 구동

dev:express : express 를 사용한 개발용 구동

 

 

3. express 개발용 구동스크립트 server.dev.js 편집

 

const express = require('express');
const app = express();
const path = require('path');

const root = path.resolve(__dirname, 'dist');
const port = 3000;

app.use(express.json()); // json 페이로드 구문을 분석한다 (body-parser 기반)

// webpack-dev-server express 용 설정
const webpack = require('webpack'); // 웹팩
const webpackConfig = require(path.resolve(__dirname, 'webpack.dev.js')); // 웹팩설정
const webpackCompiler = webpack(webpackConfig); // 웹팩컴파일러
const webpackDevMiddleware = require('webpack-dev-middleware')(webpackCompiler, webpackConfig.devServer)
app.use(webpackDevMiddleware);

// add hot loading middleware
const webpackHotMiddleware = require('webpack-hot-middleware')(webpackCompiler);
app.use(webpackHotMiddleware);

app.use(express.static(root)); // 정적파일을 제공한다.

app.get('*', (req, res) => {
  res.sendFile(path.resolve(root, 'index.html'))
})

app.listen(port, () => {
  console.log(`App listening at port: ${port}.`);
});

 

4. webpack.dev.js 추가설정

 

const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;


module.exports = merge(common, {
    mode: 'development',
    devtool: 'eval-cheap-module-source-map',
    devServer: {
        port: 3000,
        historyApiFallback: true, // history api 를 사용하는 SPA 개발 시 설정한다. 404가 발생하면 index.html 로 리턴함
        hot: true,
        compress: true,
    },
    plugins: [
        new BundleAnalyzerPlugin(),
    ],
})