Webpack не может разрешить статический импорт относительного пути

Я работаю над надстройкой Outlook, у меня работает экспресс-сервер. Я устанавливаю веб-пакет, потому что мне нужно преобразовать js в es5, чтобы он работал в Outlook Desktop. Вот упрощенная структура проекта.

/public
  /javascripts
    ssoAuth.js
/addin
  /commmands
    commands.js
    commands.html
/server
  /bin
  /helpers
  app.js

Общая папка настроена как статическая папка на моем экспресс-сервере.

app.use(express.static(path.join(__dirname, '../public'),

Моя проблема в commands.js. Я импортирую ssoAuth.js с импортом модуля es6 с относительным путем:

import getGraphAccessToken from "/javascripts/ssoAuthES6.js";

Он отлично работает, когда я запускаю node ./server/app.js и загружаю надстройку Outlook, но когда я хочу использовать Webpack для сборки, импорт не работает, я получаю:

ERROR in ./addin/commands/commands.js
Module not found: Error: Can't resolve '/javascripts/ssoAuth.js'

Я не могу понять, как настроить веб-пакет, чтобы разрешить импорт из общей папки.

Вот мои файлы конфигурации webpack:

веб-пакет.config.js:

const config = {
devtool: "source-map",
entry: {
  polyfill: "@babel/polyfill",
  commands: "./addin/commands/commands.js"
},
resolve: {
  extensions: [".ts", ".tsx", ".html", ".js"]
},
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader", 
        options: {
          presets: ["@babel/preset-env"]
        }
      }
    },
    {
      test: /\.html$/,
      exclude: /node_modules/,
      use: "html-loader"
    },
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: "file-loader"
    }
  ]
},
plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: "commands.html",
    template: "./addin/commands/commands.html",
    chunks: ["polyfill", "commands"]
  })
]};

webpack.server.config.js:

return ({
entry: {
  server: './server/bin/www',
},
output: {
  path: path.join(__dirname, 'dist'),
  publicPath: '/',
  filename: '[name].js'
},
target: 'node',
node: {
  __dirname: false,
  __filename: false,
},
externals: [nodeExternals()], 
module: {
  rules: [
    {
      // Transpiles ES6-8 into ES5
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    }
  ]
},
plugins: [
  new CopyWebpackPlugin([
    {
      to: "./public",
      from: "./public"
    }
  ])
]})

Можете ли вы помочь разобраться в этом? Есть ли лучшая структура папок, которую я должен использовать, чтобы заставить ее работать?

Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
2 748
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы используете абсолютный путь

import getGraphAccessToken from "/javascripts/ssoAuthES6.js";
//                               ^ this will look in your topmost directory on your OS

Относительный путь от commands.js будет таким:

import getGraphAccessToken from "../../javascripts/ssoAuthES6.js";

Кроме того, вы можете настроить Webpack на поиск модулей в корневом каталоге, добавив следующее в конфигурацию вашего веб-пакета:

{
// ...
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
    },
// ...
}

Затем вы можете импортировать из корневого каталога вашего проекта из любого места, например:

import getGraphAccessToken from "javascripts/ssoAuthES6.js";

Некоторые другие моменты:

  • Поскольку вы устанавливаете extensions: [".ts", ".tsx", ".html", ".js"], вам не нужно указывать расширения файлов для этих импортов.
  • Вы указываете .ts и .tsx в конфигурации вашего веб-пакета, но вы используете файлы .js. Рассмотрите возможность удаления расширений Typescript
  • Если вы используете Typescript, вам нужно будет обновить пути импорта в вашем tsconfig.json
  • Вы можете рассматривать псевдонимы пути импорта как в Webpack, так и в Typescript, чтобы более явно указать, что ваш импорт исходит из корня вашего проекта. Инструкция здесь

Другие вопросы по теме