github.com/lkm36486938/react-express-webpack4
lkm36486938/react-express-webpack4
Contribute to lkm36486938/react-express-webpack4 development by creating an account on GitHub.
github.com
순수 개발환경
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(),
],
})
'javascript & Node.js > React.js' 카테고리의 다른 글
재조정 (Reconciliation) (0) | 2020.10.29 |
---|---|
리액트의 기본구조, 그에 따른 디자인 패턴 (0) | 2020.05.17 |
React.js (0) | 2020.05.13 |