webpack 找不到不存在的所需文件

Question

我正在尝试执行服务器端渲染，并且复制了课程教师代码， 我的 src 文件夹结构是 /src -> [/client -> index.jsx, /server -> server.js, /shared -> Header.jsx]。 我收到以下错误：

~/Desktop/WEB_COURSE$ npm run dev

> [email protected] dev
> env NODE_ENV=development webpack-dev-server

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.100:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/timothy/Desktop/WEB_COURSE/public' directory

无关紧要的警报（[构建] [生成代码]等等）然后：

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/timothy/Desktop/WEB_COURSE'
resolve './src' in '/home/timothy/Desktop/WEB_COURSE'
  using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/timothy/Desktop/WEB_COURSE/src.wasm doesn't exist
      as directory
        existing directory /home/timothy/Desktop/WEB_COURSE/src
          using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src)
            using path: /home/timothy/Desktop/WEB_COURSE/src/index
              using description file: /home/timothy/Desktop/WEB_COURSE/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/timothy/Desktop/WEB_COURSE/src/index.wasm doesn't exist

webpack 5.75.0 compiled with 1 error in 10070 ms

这是我的 webpack.config.js :

const clientConfig = require('./cfg/webpack.client.config');
const serverConfig = require('./cfg/webpack.server.config');

module.exports = [
  clientConfig,
  serverConfig,
];

这是 webpack.client.config.js :

const path = require('path');

const NODE_ENV = process.env.NODE_ENV; 
const IS_DEV = NODE_ENV === 'development';
const IS_PROD = NODE_ENV === 'production';

function setupDevtool() {
  if (IS_DEV) return 'eval';
  if (IS_PROD) return false;
}

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts']
  },
  mode: NODE_ENV ? NODE_ENV : 'development',
  entry: path.resolve(__dirname, '../src/client/index.jsx'),
  output: {
    path: path.resolve(__dirname, '../dist/client'),
    filename: 'client.js'
  },
  module: {
    rules: [{
      test: /\.[tj]sx?$/,
      use: ['ts-loader']
    }]
  },
  devtool: setupDevtool()
};

这是 webpack.server.config.js :

const path = require('path');

const NODE_ENV = process.env.NODE_ENV; 

module.exportts = {
    target: "node",
    mode: NODE_ENV ? NODE_ENV : 'development',
    entry: path.resolve(__dirname, '../src/server/server.js'),
    output: {
        path: path.resolve(__dirname, '../dist/server'),
        filename: 'server.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts']
    },
    module: {
        rules: [{
          test: /\.[tj]sx?$/,
          use: ['ts-loader']
        }]
    },
};

我是 webpack 的新手，所以我根本不知道如何尝试自己解决这个问题。

Answer 1

简短回答：

webpack.server.config.js

中有一个拼写错误。应该是

module.exports = {}

，而不是

module.exportts = {}

。

---

长答案

项目结构：

$ tree -L 3 -I node_modules
.
├── cfg
│   ├── webpack.client.config.js
│   └── webpack.server.config.js
├── package-lock.json
├── package.json
├── src
│   ├── client
│   │   └── index.js
│   └── server
│       └── server.js
└── webpack.config.js

cfg/webpack.client.config.js

：

const path = require('path');

const NODE_ENV = process.env.NODE_ENV;

module.exports = {
    mode: NODE_ENV ? NODE_ENV : 'development',
    entry: path.resolve(__dirname, '../src/client/index.js'),
    output: {
        path: path.resolve(__dirname, '../dist/client'),
        filename: 'client.js',
    },
};

cfg/webpack.server.config.js

：

const path = require('path');

const NODE_ENV = process.env.NODE_ENV;

module.exports = {
    target: 'node',
    mode: NODE_ENV ? NODE_ENV : 'development',
    entry: path.resolve(__dirname, '../src/server/server.js'),
    output: {
        path: path.resolve(__dirname, '../dist/server'),
        filename: 'server.js',
    },
};

webpack.config.js

：

const clientConfig = require('./cfg/webpack.client.config');
const serverConfig = require('./cfg/webpack.server.config');

module.exports = [clientConfig, serverConfig];

构建日志：

$ npm run build

> @1.0.0 build /home/lindu/workspace/webpack-samples/webpack-v5/stackoverflow/75339799
> webpack

asset client.js 1.21 KiB [emitted] (name: main)
./src/client/index.js 1 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 74 ms

asset server.js 1.22 KiB [emitted] (name: main)
./src/server/server.js 1 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 61 ms

项目结构：

$ tree -L 3 -I node_modules
.
├── cfg
│   ├── webpack.client.config.js
│   └── webpack.server.config.js
├── dist
│   ├── client
│   │   └── client.js
│   └── server
│       └── server.js
├── package-lock.json
├── package.json
├── src
│   ├── client
│   │   └── index.js
│   └── server
│       └── server.js
└── webpack.config.js

7 directories, 9 files