webpack-dev-server的备用端口

时间:2019-01-28 20:20:43

标签: webpack configuration port wildfly webpack-dev-server

我使用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))
        }
    }
}

0 个答案:

没有答案