백엔드 용 Webpack?

백엔드 용 Webpack?

---

나는 단지 궁금해서 새로운 프로젝트에 Webpack을 사용하기 시작했고 지금까지 잘 작동하고 있습니다. 나는 내가 전에 사용했던 Grunt보다 더 좋아한다고 거의 말할 것입니다. 하지만 지금은 Express 백엔드와 함께 사용하는 방법과 사용 방법이 헷갈립니다.

저는 프론트 엔드 (ReactJS)와 백엔드 (ExpressJS)가있는 하나의 앱을 만들고 있습니다. 앱은 Heroku에 게시됩니다. 이제 ExpressJS와 함께 Webpack을 사용하여 단일 명령 (프론트 엔드 및 백 엔드)으로 앱을 시작하고 실행해야하는 것 같습니다.

그러나이 블로그 게시물을 작성한 사람은 http://jlongster.com/Backend-Apps-with-Webpack--Part-I 를 사용하여 모든 백엔드 js 파일을 함께 묶는 데 Webpack을 사용하는 것 같습니다. 제 생각에는 실제로 필요하지 않습니다. 백엔드 파일을 묶어야하는 이유는 무엇입니까? 백엔드를 실행하고, 백엔드 파일의 변경 사항을 확인하고, 나머지 Webpack의 기능을 프론트 엔드에만 사용하고 싶습니다.

어떻게 프런트 엔드를 번들로 묶지 만 동시에 백 엔드 nodejs 부분을 실행합니까? 아니면 백엔드 파일을 Webpack과 번들로 묶어야 할 이유가 있습니까?

---

노드 백엔드에서 웹팩을 사용하는 이유

반응 및 노드 앱 에 대해 이야기하고 있다면 동형 반응 앱을 빌드 할 수 있습니다 . 그리고 import클라이언트 측의 반응 앱에서 ES6 모듈을 사용하는 경우 괜찮습니다. 클라이언트 측의 웹팩에 번들로 제공됩니다.

그러나 노드가 ES6 모듈을 지원하지 않기 때문에 동일한 반응 모듈을 사용할 때 문제는 서버에 있습니다 . require('babel/register');노드 서버 측에서 사용할 수 있지만 런타임에서 코드를 전달하는 것은 효과적이지 않습니다. 이 문제를 해결하는 가장 일반적인 방법은 웹팩에 의한 팩 백엔드입니다 (모든 코드가 웹팩에 의해 트랜스 파일 될 필요는 없습니다-이 예제의 반응과 같은 문제 일뿐입니다).

동일은 함께 간다 JSX .

프런트 엔드와 백엔드를 동시에 번들링

웹팩 구성은 배열로 구성해야 할 수 있습니다. 하나는 프런트 엔드 용이고 다른 하나는 백엔드 용입니다.

webpack.config.js

const common = {
    module: {
        loaders: [ /* common loaders */ ]
    },
    plugins: [ /* common plugins */ ],
    resolve: {
        extensions: ['', '.js', '.jsx'] // common extensions
    }
    // other plugins, postcss config etc. common for frontend and backend
};

const frontend = {
     entry: [
         'frontend.js'
     ],
     output: {
        filename: 'frontend-output.js'
     }
     // other loaders, plugins etc. specific for frontend
};

const backend = {
     entry: [
         'backend.js'
     ],
     output: {
        filename: 'backend-output.js'
     },
     target: 'node',
     externals: // specify for example node_modules to be not bundled
     // other loaders, plugins etc. specific for backend
};

module.exports = [
    Object.assign({} , common, frontend),
    Object.assign({} , common, backend)
];

이 구성을 시작하면 webpack --watch두 파일이 병렬로 빌드됩니다. 당신이 편집 프론트 엔드 특정 코드에만 frontend-output.js생성됩니다, 동일입니다 backend-output.js. 가장 좋은 부분은 동형 반응 부분을 편집 할 때입니다. webpack은 두 파일을 동시에 빌드합니다.

이 튜토리얼 설명에서 노드에 웹팩을 사용하는 경우 (4 장)를 찾을 수 있습니다 .

---

readme에서 webpack-node-externals를 사용할 수 있습니다 .

npm install webpack-node-externals --save-dev

webpack.config.js에서 :

var nodeExternals = require('webpack-node-externals');

module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    ...
};

참조 URL : https://stackoverflow.com/questions/37788142/webpack-for-back-end