Webpack dev server - запускать несколько приложений на нескольких портах - PullRequest
Новая
       25

Webpack dev server - запускать несколько приложений на нескольких портах

0 голосов
/ 13 октября 2018

В настоящее время я запускаю два приложения, которые находятся в одном репо.

Первое работает на /, а другое на port 3000 (разные HTML-файлы).

Iхочу создать другое приложение, которое будет работать на port 5000 (с собственным HTML-файлом).

Как мне это сделать?

Это моя конфигурация Webpack: 

   entry: {

       mainApp: "./MainApp.js",
       appNumberTwo: "./AppNumberTwo.js"
   }, 

  devServer: {
    port: 3000,
    host: '0.0.0.0',
    headers: {
        "Access-Control-Allow-Origin": "*"
    },
    historyApiFallback: {
        index: publicPath + 'app_number_2.html',
    },
    proxy: [{
        target: "http://www.dev.mydomain.com"
    }]
},

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Экземпляр с двумя узлами в package.json 

"scripts": {
    "dev": "NODE_ENV=dev node ./node_modules/.bin/webpack-dev-server --watch --mode=development --config-name='survey' & NODE_ENV=dev node ./node_modules/.bin/webpack-dev-server --watch --mode=development --config-name='account'",
    "build": "node ./node_modules/.bin/rimraf ./dist && node ./node_modules/.bin/webpack-cli --mode=production"
  },

Это две разные конфигурации.В каждом конфиге есть разные конфиги dev 

const account = require("./account.config");
const survey = require("./survey.config");
module.exports = [account, survey];
0 голосов
/ 13 октября 2018

Вот один из способов сделать это.Вы можете попробовать использовать несколько таких компиляторов, как 

//webpack.config.js
[{
    entry: "./entry1.js",
    output: {
        filename: "outpu1.js"
    }
}, {
    entry: "./entry2.js",
    output: {
        filename: "outpu2.js"
    }
}]

, а затем создать скрипт узла следующим образом: 

const WebpackDevServer = require("webpack-dev-server")
const webpack = require("webpack")
const config = require("./webpack.config")

const compiler = webpack(config)

const server1 = new WebpackDevServer(compiler.compilers[0], {
    contentBase: __dirname,
    hot: true,
    historyApiFallback: false,
    compress: true,
})

const server2 = new WebpackDevServer(compiler.compilers[1], {
    contentBase: __dirname,
    hot: true,
    historyApiFallback: false,
    compress: true,
})

server1.listen(3000, "localhost", function() {})
server2.listen(5000, "localhost", function() {})

Вы создаете экземпляр webpack-dev-server для каждого compiler.

Другой способ сделать это - написать несколько скриптов в вашем package.json следующим образом: 

{
   "scripts":{
       "serve1": "webpack-dev-server --content-base <file/directory/url/port> --port 3000",
       "serve2": "webpack-dev-server --content-base <file/directory/url/port> --port 5000"
   }
}

, а затем запустить оба скрипта, используя npm-run-all, 

npm-run-all serve1 serve2
...