es6 개발환경 셋팅 질문드립니다!

JavaScript
1

안녕하세요!

node.js express 로 es6 개발환경을 세팅하고있습니다.
babel7 과 webpack을 이용하고있습니다.
현재 프론트엔드 파일은 webpack을 이용해서 번들링하고
백엔드 파일은 babel server --out-dir build 명령어를 이용해서 트랜스파일링 하도록 했습니다.

pakage.json

    {
  "name": "es6project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "server": "babel server --out-dir build ",
    "build": "webpack -w",
    "test": "mocha",
    "start": "nodemon build/server.js --exec babel-node",
    "devserver": "webpack-dev-server --inline"
  },
  "dependencies": {
    "@babel/node": "^7.2.2",
    "@babel/polyfill": "^7.2.5",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0"
  },
  "main": "src/app.js",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.4",
    "chai": "^4.2.0",
    "eslint": "^5.11.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1",
    "mocha": "^5.2.0",
    "nodemon": "^1.18.9",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.5"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/js/entry.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist/js')
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      include: [
         path.resolve(__dirname, 'src/js')
      ],
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
           presets: ['@babel/preset-env']
        }
      }
    }
    ]
  },
  devtool: 'source-map',
  mode: 'development'
};

디렉토리 구조는

    es6project
       -build (server의 파일들이 es5로 트랜스파일링 되는 디렉토리)
       -dist(src의 파일들이 es5로 트랜스파일링 되는 디렉토리)
       -server
           -router
           -server.js
       -src
           -js
        -views

위와 같이 구성했습니다.
일단 궁금한점은 백엔드쪽 파일들을 트랜스파일링 할때 webpack을 통해서 하려면
그러니까 하나의 명령어(webpack -w) 를 통해서 프론트와 백엔드 파일들을 다 트랜스파일링 시키려면
어떤 방법이 있을지 궁금하고 , 디렉토리구조를 저런식으로 관리하는게 괜찮은구조인지 아니면
좋은구조를 추천해주시면 감사하겠습니다!!

2

module.exports = [{}, {}] 이렇게 웹팩 설정을 배열로 넣을 수 있습니다.
첫 요소는 프론트용 웹팩, 두 번째 요소는 서버용 웹팩 넣으시면 됩니다.

단일 서버 구조인 경우에는 지금처럼 프론트랑 서버 폴더 구조 나눠서 하시면 됩니다.

1개의 좋아요
3

아! 그렇군요
알려주셔서 감사합니다!!!
드디어 해결할수있겠네요 ㅜㅜ