У меня следующая структура папок.
.
├── client
│ ├── components
│ ├── dev.server.ts
│ ├── features
│ ├── index.html
│ ├── index.tsx
│ ├── package.json
│ ├── tsconfig.json
│ ├── webpack.config.ts
│ └── webpack.dev.config.ts
├── dev.server.ts
├── package.json
├── prod.server.ts
├── server
│ ├── core
│ ├── models
│ ├── node_modules
│ ├── package.json
│ ├── routes
│ ├── server.module.ts
└── tsconfig.json
В моей папке dev.server.ts
в корневой папке я импортирую папки client
и server
как модули, которые я добавил в свою основную package.json
вот так:
"dependencies": {
"client": "./client",
"server": "./server"
}
Пакет server
работает просто отлично. Но у client
есть проблема. Когда я пытаюсь использовать webpack
для запуска сервера Dev, он не может разрешить пакеты из node_modules
. Он пытается найти их в корневом каталоге, а не там, где находится скрипт.
ERROR in multi react-hot-loader/patch ./client/index.tsx webpack-hot-middleware/client
Module not found: Error: Can't resolve 'webpack-hot-middleware/client' in '/home/victor/Dev/back'
@ multi react-hot-loader/patch ./client/index.tsx webpack-hot-middleware/client main[2]
Мне удалось заставить его работать, добавив process.chdir(path.resolve(__dirname))
в начало сценария dev.server.ts
клиента, который, как я знаю, является идеальным. Вот его содержание:
// ./client/dev.server.ts
import webpackConfig from './webpack.dev.config';
import path from 'path';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
const CustomMiddlewares = () => {
// This line makes it work
process.chdir(path.resolve(__dirname));
// Configure o compilador
let conf = webpackConfig();
let compiler = webpack(conf);
let devMiddleware = webpackDevMiddleware(compiler, { publicPath: '/', logLevel: "error" });
let hotMiddleware = webpackHotMiddleware(compiler);
return [devMiddleware, hotMiddleware];
}
export default CustomMiddlewares;
И использовать его так:
// ./dev.server.ts
import clientDevServer from 'client';
import startServer from 'server';
const startDevServer = async () => {
let app = await startServer();
//
let [devMiddleware, hotMiddleware] = clientDevServer();
// Serviço de middleware
app.use(devMiddleware);
// hotReload
app.use(hotMiddleware);
}
startDevServer();
Как мне сделать, чтобы мой webpack
скрипт пытался разрешить файлы, используя путь кпапка клиента node_modules
вместо родительской?