믹싱 익스프레스와 반응 하시겠습니까?

Question

NodeJS 기반 서버에서 실행되는 React 기반 응용 프로그램을 가지고 있으며 xhr을 사용하지 않고 비 정적 파일을 다운로드 할 수 있도록하려고합니다.

나는 익스프레스를 사용할 생각이 있지만, 같은 컨테이너에 React와 함께 공존시키는 방법을 모르겠다. 아무도 내가 이것에 대해 어떻게 생각하는지 제안 할 수 있습니까? 나는 아직도 웹팩을 배우고 있으며, 이것에 대한 예를 찾는 데 어려움이 있습니까? 다음과 같이보고,

node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --port 8081 --hot --inline 

웹팩-DEV-server.js으로 :

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

'./src/index.js을'

반작용 서버는 웹팩를 통해 시작된다 반응 유형 코드입니다.

Answer 1

면책 조항 : 나는 결코 직접 webpack-dev-server 자신을 사용하지 않았지만 (적어도 직접적으로는) 나는 두 가지 해결책을 생각할 수 있습니다.

하나는 webpack-dev-server 구성에서 setup을 사용하는 것입니다. stated here으로 : 나 자신을 사용하는 방법입니다 또는

setup: function(app) { 
    // Here you can access the Express app object and add your own custom middleware to it. 
    // For example, to define custom handlers for some paths: 
    // app.get('/some/path', function(req, res) { 
    // res.json({ custom: 'response' }); 
    // }); 
} 

, 익스프레스를위한 미들웨어 webpack-dev-middleware을 사용하는 것입니다. 따라서 기본적으로 webpack-dev-server과 동일한 기능을 가진 Express 서버를 직접 만들 수 있습니다. 여기

내 프로젝트 중 하나에서 발췌 한 것입니다 ( app는 익스프레스 응용 프로그램 인스턴스입니다) :

는 @ robertklep의 대답에 추가

// Webpack (only when not running in `production` mode): 
if (process.env.NODE_ENV !== 'production') { 
    debug('setting up webpack middleware'); 
    const webpackDevMiddleware = require('webpack-dev-middleware'); 
    const webpackHotMiddleware = require('webpack-hot-middleware'); 
    const webpackConfig  = require('./webpack.dev'); 
    const compiler    = require('webpack')(webpackConfig); 

    app.use(webpackDevMiddleware(compiler, { 
    noInfo  : true, 
    publicPath : webpackConfig.output.publicPath 
    })); 
    app.use(webpackHotMiddleware(compiler)); 
} 

Answer 2

, 일부 추가 연구를 기반으로, 프로젝트 반응 '컴파일'할 수는 그런 다음 노드없이 자원을 사용하십시오.

node node_modules/.bin/webpack 

이

는 컴파일 된 프로젝트를 포함하는 bundle.js 파일을 만듭니다 :

를 사용하여 노드 & 웹팩 프로젝트 '컴파일'입니다. 다음 기존의 웹 서버를 통해 제공 될 수있는 DIST 폴더에

cp bundle.js dist/ 
cp index.html dist/ 
cp -rf img css frameworks dist/ 

모든 : 같은 이미지와 같은 다른 파일은, 외부 자바 스크립트와 스타일 시트 (예를 들어, DIST 폴더가있는 가정), 복사 할 필요가있을 것이다 Nginx 또는 Apache와 같이 NodeJS를 사용합니다.