Question

我正在尝试为 React 设置一个基本的 webpack 配置，并使用 webpack 开发服务器在开发模式下提供它。 Webpack 可以很好地编译所有内容，但是在使用 webpack 开发服务器时不提供文件...我将项目托管在 VPS 上，并使用样板 create-react-app 开发服务器测试了服务器是否可访问 - 确实如此。我可以看到该项目很好地转到“http://serverIPv4:3000”。 Webpack 开发服务器项目配置为在端口 9000 上提供服务 - 即使正在编译文件，这也不起作用。它也不适用于默认端口 8080 或 3000。我缺少什么？

webpack.config.js：

const webpack = require('webpack');
const path = require('path');

const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    resolve: {
        extensions: [
            '.js',
            '.jsx'
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 9000
    },

};

module.exports = config;

devDependencies：

"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1"

项目结构：

dist
 |-index.html
src
 |-App.js
 |-index.js
 |-styles.css

控制台输出：

ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/ubuntu/rcw-webpack/dist
ℹ ｢wdm｣: asset bundle.js 1.36 MiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 1.29 MiB 32 modules
modules by path ./src/ 4.32 KiB
  modules by path ./src/*.js 3.65 KiB
    ./src/index.js 244 bytes [built] [code generated]
    ./src/App.js 3.41 KiB [built] [code generated]
  modules by path ./src/*.css 681 bytes
    ./src/styles.css 327 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/styles.css 354 bytes [built] [code generated]
webpack 5.11.1 compiled successfully in 2535 ms
ℹ ｢wdm｣: Compiled successfully.

更新：package.json：

{
  "name": "rcw-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "rm dist/bundle.js",
    "dev": "webpack --mode development",
    "start": "webpack serve --mode development --env development",
    "build-prod": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "socket.io-client": "^3.0.5"
  }
}

webpack 开发服务器不服务（但编译）

0 个答案: