webpack-dev-server를 사용하여 노드 익스프레스 서버 실행

webpack-dev-server를 사용하여 노드 익스프레스 서버 실행

---

다음 구성을 사용하여 반응 프런트 엔드를 성공적으로 실행하기 위해 webpack을 사용하고 있습니다.

{
    name: 'client',
    entry: './scripts/main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'  
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query:{
                    presets: ['es2015', 'react', 'stage-2']
                }
            }
        ]
    }
}

나는 node.js 익스프레스 백엔드를 설치하려고 시도하고 있으며 webpack을 통해서도 실행하고 싶습니다. 그래서 백엔드와 프런트 엔드를 모두 실행하는 단일 서버가 있고 바벨을 사용하여 트랜스 파일하기를 원하기 때문입니다. 내 자바 스크립트.

다음과 같은 빠른 테스트 서버를 만들었습니다.

var express = require('express');
console.log('test');

var app = express();

app.get('/', function(req, res){
    res.send("Hello world from Express!!");
});

app.listen(3000, function(){
    console.log('Example app listening on port 3000');
});

이 프로그램을 실행 node index.js하고 브라우저를 열면 localhost:3000"Hello world from Express !!"가 인쇄됩니다. 여태까지는 그런대로 잘됐다. 그런 다음 웹 팩 구성을 만들어 보았습니다.

var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
    .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;    
});

module.exports = [
{
    name: 'server',
    target: 'node',
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    externals: nodeModules,
    module: {
        loaders: [
            { 
                test: /\.js$/,
                loaders: [
                    'babel-loader'
                ]
            },
            {
                test:  /\.json$/, 
                loader: 'json-loader'
            }
        ]
    }
}   

명령을 실행하면 webpack-dev-server성공적으로 시작됩니다. 그러나 localhost:3000지금 내 브라우저로 이동 하면 서버가 전혀 실행되지 않는 것처럼 웹 페이지를 사용할 수 없다는 메시지가 표시됩니다.

나는 노드와 웹팩 모두에 매우 익숙하기 때문에 어딘가에서 작은 실수를했거나 멀리 떨어져 있습니다.)

---

Webpack-dev-server는 클라이언트 측 개발에 적합하지만 Express API 또는 미들웨어를 배포하지 않습니다. 따라서 개발 단계에서 두 개의 별도 서버를 실행하는 것이 좋습니다. 하나는 클라이언트 용이고 다른 하나는 서버 측 API 용입니다.

Nodemon npm install --save-dev nodemon은 API의 핫 재배포를 제공하는 좋은 백엔드 개발 서버입니다. 또는 변경시 Express를 사용하고 다시 시작할 수 있습니다. 프로덕션에서 클라이언트와 API는 동일한 익스프레스 서버에서 계속 제공됩니다.

package.json쉽게 시작할 수 있도록 nodemon 및 webpack-dev-server 모두에 대한 라이프 사이클 이벤트를 설정하십시오 (예 :) npm run dev-server.

"scripts": {
   "start": "webpack --progress --colors",
   "dev-server": "nodemon ./server.js localhost 8080",
   "dev-client": "webpack-dev-server --port 3000",
}

또는 노드에서 직접 Express를 실행하려면 다음을 수행하십시오.

"scripts": {
   "start": "webpack --progress --colors",
   "dev-server": "node dev-server.js",
   "dev-client": "webpack-dev-server --port 3000",
}

// dev-server.js
const express = require('express');
const app = express();
// Import routes
require('./_routes')(app);   // <-- or whatever you do to include your API endpoints and middleware
app.set('port', 8080);
app.listen(app.get('port'), function() {
    console.log('Node App Started');
});

참고 : api 서버는 webpack-dev-server와 다른 포트를 사용해야합니다.

마지막으로 webpack-dev-config에서 프록시를 사용하여 API 호출을 새 포트로 리디렉션해야합니다.

devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,

  host: 'localhost', // Defaults to `localhost`
  port: 3000, // Defaults to 8080
  proxy: {
    '^/api/*': {
      target: 'http://localhost:8080/api/',
      secure: false
    }
  }
},
// and separately, in your plugins section
plugins: [
  new webpack.HotModuleReplacementPlugin({
    multiStep: true
  })
]

** 하나의 스크립트로 둘 다 시작 및 종료 할 수있는 보너스 포인트

---

이후 webpack-dev-server 는 변경시 컴파일 및 핫 리로드 기능이있는 작은 익스프레스 서버 때문 입니다.

따라서 이미 백엔드 API 용 익스프레스 서버가있는 경우 compile on change and hot reload 됩니다.

그런 다음 webpack-dev-serverpackage.json 를 살펴본 후 키는 webpack-dev-middleware입니다.

const express = require('express'); //your original BE server
const app = express();

const webpack = require('webpack');
const middleware = require('webpack-dev-middleware'); //webpack hot reloading middleware
const compiler = webpack({ .. webpack options .. }); //move your `devServer` config from `webpack.config.js`


app.use(middleware(compiler, {
  // webpack-dev-middleware options
}));

app.listen(3000, () => console.log('Example app listening on port 3000!'))

따라서 BE 서버를 실행하면 웹팩을 사용하여 모든 것을 컴파일하고 변경 사항을 감시합니다. LOL ~

또한 핫 리로딩 기능을 위해 webpack-hot-middleware 를 추가 하십시오. 핫 모듈 교체를 참조하십시오.

---

여기와 여기에 대한 질문에서 ES6와 함께 ReactJS를 사용하고있는 것으로 보입니다. 나는 똑같은 문제에 직면했으며 여기에 어떻게 대처했는지가 있습니다.

1. Have multiple entry points for your application

In particular you can put all your vendor files like JQuery, React etc into one chunk. This way, your vendor files will remain the same even when you modify your souce files. You can add this line to your webpack config

entry: {
    vendors: ['react','reactDom','jquery'] //Any other libraries
}

Use the CommonsChunkPlugin to have webpack determine what code/modules you use the most, and put it in a separate bundle to be used anywhere in your application.

plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity),
]

2. Use React Hot Loader

Run npm install react-hot-loader --save-dev. Make sure you have installed webpack-dev-server first.

Then you need to change your loaders to this -

loaders: [
        { 
            test: /\.jsx?$/, 
            loaders: ['react-hot'],
            include: path.join(__dirname, 'public')

        },{ 
           loader: 'babel',
            query: {
                presets: ['react', 'es2015']
            },
            include: path.join(__dirname, 'public')
        }, 
    ]

Make sure React Hot Loader comes before Babel in the loaders array. Also make sure you have include: path.join(__dirname, 'public') to avoid processing node_modules, or you may get an error like this -

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

3. Modifications to your script tags in your index.html page

If your html has something like this -

<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>

Change this to point to your webpack-dev-server proxy -

<script src="http://localhost:8080/dist/js/vendors.js"></script>
<script src="http://localhost:8080/dist/js/app.bundle.js"></script>

4. Run webpack-dev-server --hot --inline,

wait for the bundling to finish, then hit http://localhost:3000 (your express server port) in your browser.

If you run into any errors, you could find this troubleshooting guide very useful.

Hope this helps, and you can take a look at the webpack setup for my project here

참고URL : https://stackoverflow.com/questions/35233291/running-a-node-express-server-using-webpack-dev-server