首页 > 解决方案 > webpack 开发服务器不运行

问题描述

我的 webpack 开发服务器有问题。首先我展示我的代码。

开发者.ts

import webpack from 'webpack'
import autoprefixer from 'autoprefixer'
import htmlTemplate from 'html-webpack-template'
import HtmlWebpackPlugin from 'html-webpack-plugin'

export const mode = 'development'

export const entry = ['@babel/polyfill', './src/index']

export const output = {
  filename: '[name].js',
  publicPath: '/',
  path: '/',
}

export const devServer = {
  port: 3000
}

export const module = {
  rules: [
    {
      test: /\.(js|ts|tsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          query: {
            babelrc: false,
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    browsers: '> 0.25%, not dead',
                  },
                  useBuiltIns: 'usage',
                  modules: false,
                },
              ],
              '@babel/preset-typescript',
              '@babel/preset-react',
            ],
            plugins: [
              'react-hot-loader/babel',
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-syntax-dynamic-import',
            ],
          },
        },
      ],
    },
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              autoprefixer({
                overrideBrowserslist: ['>2%', 'last 2 versions'],
              }),
            ],
          },
        },
      ],
    },
    {
      test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
      loader: 'file-loader?name=[name].[ext]',
    },
  ],
}

export const resolve = {
  extensions: ['.ts', '.tsx', '.js', '.json'],
}

export const plugins = [
  new HtmlWebpackPlugin({
    title: 'Atlantis United',
    inject: false,
    template: htmlTemplate,
    appMountId: 'app',
   }),
]

我的脚本:“dev”:“webpack-dev-server --config=./config/webpack/dev.ts --hot --history-api-fallback --disable-host-check --host=0.0.0.0 --port=$PORT"

我该如何解决这个错误?

listen EACCES: permission denied $PORT

at Server.setupListenHandle [as _listen2] (net.js:1296:21)

at listenInCluster (net.js:1361:12)

at Server.listen (net.js:1458:5)

at Server.listen (C:\Users\Roman\Documents\Projects\test-2019\frontend\dashboard\node_modules\webpack-dev-server\lib\Server.js:744:30)

at C:\Users\Roman\Documents\Projects\test-2019\frontend\dashboard\node_modules\webpack-dev-server\bin\webpack-dev-server.js:160:16

at processTicksAndRejections (internal/process/task_queues.js:97:5)

Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1340:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'EACCES',
  errno: 'EACCES',
  syscall: 'listen',
  address: '$PORT',
  port: -1
}

标签: javascripttypescriptwebpackwebpack-dev-serverlerna

解决方案


推荐阅读