Запуск экспресс-сервера node с помощью webpack-dev-сервера

Я использую 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 express, и хотел бы запустить его через webpack, так что у меня есть один сервер, на котором работают как бэкэнд, так и интерфейс, и потому что я хочу использовать babel для перевода моего javascript.

Я сделал быстрый тестовый сервер, похожий на это:

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, он просто скажет, что веб-страница недоступна, так же, как когда сервер не работает вообще.

Я очень новичок и для node, и для webpack, так что либо я сделал небольшую ошибку где-то, либо я ушел;)

Ответы

Ответ 1

Webpack-dev-сервер отлично подходит для разработки на стороне клиента, но не будет развертывать Express api или промежуточное ПО. Поэтому в разработке я рекомендую запустить два отдельных сервера: один для клиента и один для вашей серверной стороны api.

Nodemon npm install --save-dev nodemon - хороший сервер разработки бэкэнд, который даст вам горячее повторное развертывание вашего api, или вы можете просто использовать экспресс и перезагружать при внесении изменений. В процессе производства клиент и api все равно будут обслуживаться одним и тем же экспресс-сервером.

Задайте событие жизненного цикла для nodemon и webpack-dev-сервера в package.json, чтобы упростить их запуск (например: npm run dev-server).

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

Или, чтобы запустить экспресс непосредственно из node:

"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-сервер.

И, наконец, в вашем 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
  })
]

** Бонусные баллы за то, что один script запускает и убивает как

Ответ 2

Из ваших вопросов здесь и здесь, похоже, что вы используете ReactJS с ES6. Я столкнулся с одной и той же проблемой, и вот как я ее решал -

  • У вас есть несколько точек входа для вашего приложения

В частности, вы можете поместить все файлы своего поставщика, такие как JQuery, React и т.д. в один кусок. Таким образом, ваши файлы поставщиков будут оставаться неизменными даже при изменении ваших файлов suce. Вы можете добавить эту строку в свою конфигурацию webpack

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

Используйте CommonsChunkPlugin, чтобы webpack определял, какой код/​​модули вы используете больше всего, и поместите его в отдельный пакет, который будет использоваться в любом месте вашего приложения.

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

  1. Использование React Hot Loader

Запустите npm install react-hot-loader --save-dev. Прежде всего убедитесь, что вы установили webpack-dev-server.

Затем вам нужно изменить свои загрузчики на это -

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

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

Убедитесь, что React Hot Loader появился перед Babel в массиве загрузчиков. Также убедитесь, что у вас есть include: path.join(__dirname, 'public'), чтобы избежать обработки node_modules, или вы можете получить такую ​​ошибку:

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

  1. Модификации тэгов script на странице index.html

Если ваш html имеет что-то вроде этого -

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

Измените это, чтобы указать на ваш прокси-сервер webpack-dev-server -

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

  1. Запустить webpack-dev-server --hot --inline,

дождитесь завершения комплектации, затем нажмите http://localhost:3000 (ваш порт экспресс-сервера) в вашем браузере.

Если вы столкнулись с любыми ошибками, вы можете найти это руководство по устранению неполадок.

Надеюсь, что это поможет, и вы можете взглянуть на настройку webpack для моего проекта здесь