Загрузка общих ресурсов между несколькими записями в Webpack

Question

Я занимаюсь разработкой приложения на основе Node.js, Express и Webpack.

Приложение имеет несколько страниц (с разными логиками на стороне клиента c), поэтому я использую пользовательский папка структуры, без уникальной папки /src.

Это структура:

|── clients
    └── client_1
        └── client_1_logic.js
        └── client_1_style.css
    └── client_2
        └── client_2_logic.js
        └── client_2_style.css

|── server
    └── index.js (node.js server entry point)
    └── other_serverside_stuff.js

|── public (public static folder)
    └── static_files (audio, img...)
    └── js (webpack bundled scripts)
        └── client_1.bundle.js
        └── client_2.bundle.js

|── shared (here's the question)

Я доволен текущей структурой, потому что могу отделить логи c в аккуратным способом, импортируя модули только при необходимости, упаковывая все и помещая его в папку publi c, так что я могу получить файлы времени выполнения со стороны клиента. Папка publi c установлена ​​как папка stati c с express: app.use(express.static(path.join(__dirname, '../public')));

Я хочу поместить несколько файлов в папку shared (например, общий файл конфигурации, или шаблон c. css), и импортируйте их в logi c на стороне клиента. Например, представьте config.js в папке shared, я хотел бы импортировать его в client_1_logic.js следующим образом:

// libs
import {html, render} from 'lit-html';
// style
import 'bootstrap/dist/css/bootstrap.min.css';
// config
import config from './shared/config.js';

// do something with imported modules ...

Теперь я получаю ошибку Module not found: Error: Can't resolve './shared/config.js'.

Это работает, если я помещаю папку shared в подпапки client_1 и client_2, но я действительно не хочу дублировать все файлы.

Вот мой webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    player: './clients/client_1/client_1_logic.js',
    controller: './clients/client_2/client_2_logic.js'
  },
  devtool: 'inline-source-map',
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'public/js/'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
};

Большое спасибо заранее, Франческо

Answer 1

Хорошо, я нашел чистое решение:

Добавление правила разрешения в webpack.config.js таким образом:

resolve: {
  alias: {
    config: path.join(__dirname, 'shared/'),
  }
}

Я могу импортировать файл из клиентов следующим образом:

import config from 'shared/config.js' (без ./)

Здесь мы go!