我使用webpack-dev-server
运行一个Electron项目,并使用JBoss / Wildfly服务器运行一个Web服务。两者都在端口8080上运行。首先运行Wildfly服务器,然后运行webpack-dev-server
,将在Electron窗口中从内部的Wildfly默认页面开始运行。
作为解决方案,我更改了端口webpack-dev-server
的运行状态,如建议的here一样,webpack-dev-server --hot --host 0.0.0.0 --port 9000 --config=./webpack.dev.config.js --mode development
,但错误仍然存在。
here的另一种解决方案建议将port: 9000
添加到Webpack配置文件中,但是这种方法也仍然存在错误。
我应该怎么做才能在8080以外的其他端口上运行webpack-dev-server
?
package.json:
{
"name": "myproject-administration",
"version": "1.0.0",
"description": "Administration for MyProj.",
"main": "electron-entry.js",
"author": "MyName",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development",
"build": "electron-packager . myproject-administration --platform linux --arch x64 --out dist/",
"deb64": "electron-installer-debian --src dist/myproject-administration-linux-x64/ --dest dist/installers/ --arch amd64",
"compile": "yarn build && yarn deb64"
},
"dependencies": {
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.4.6",
"babel-loader": "^8.0.5",
"babili-webpack-plugin": "^0.1.2",
"css-loader": "^2.1.0",
"electron": "^4.0.1",
"electron-installer-debian": "^1.1.0",
"electron-installer-zip": "^0.1.2",
"electron-packager": "^13.0.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4",
"typings-for-css-modules-loader": "^1.7.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
}
webpack.dev.config.js:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { spawn } = require('child_process')
// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up.
const defaultInclude = path.resolve(__dirname, 'src')
module.exports = {
entry: './src/App.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
include: defaultInclude
},
{
test: /\.scss$/,
include: /\.global.scss$/,
use : [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
{ loader: "sass-loader" }
]
},
{
test: /\.jsx?$/,
use: [{ loader: 'babel-loader' }],
include: defaultInclude
},
{
test: /\.(jpe?g|png|gif)$/,
use: [{ loader: 'file-loader?name=img/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{ loader: 'file-loader?name=font/[name]__[hash:base64:5].[ext]' }],
include: defaultInclude
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
target: 'electron-renderer',
plugins: [
new HtmlWebpackPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
devtool: 'cheap-source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
stats: {
colors: true,
chunks: false,
children: false
},
before() {
spawn(
'electron',
['.'],
{ shell: true, env: process.env, stdio: 'inherit' }
)
.on('close', code => process.exit(0))
.on('error', spawnError => console.error(spawnError))
}
}
}