Webpack 無法解析相對路徑導入快遞 static

Question

我正在開發一個 outlook 插件我有一個快速服務器正在運行。 我正在設置 webpack 因為我需要將 js 轉換為 es5 以使其在 Outlook 桌面上工作。 這是簡化的項目結構。

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

公用文件夾在我的快遞服務器中設置為 static 文件夾

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

我的問題是在 commands.js 中，我使用 es6 模塊導入 ssoAuth.js 和相對路徑：

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 以允許從公共文件夾導入。

這是我的 webpack 配置文件：

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"
    }
  ])
]})

你能幫忙解決這個問題嗎？ 我應該使用更好的文件夾結構來使其工作嗎？

謝謝

Answer 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 配置中來設置 Webpack 以從根目錄中查找模塊：

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

然后，您可以從任何地方從項目的根目錄導入，如下所示：

import getGraphAccessToken from "javascripts/ssoAuthES6.js";

---

其他幾點：

• 由於您正在設置extensions: [".ts", ".tsx", ".html", ".js"] ，因此您不需要為這些導入提供文件擴展名
• 您在 webpack 配置中指定.ts和.tsx ，但您使用的是.js文件。 考慮刪除 Typescript 擴展
• 如果您使用的是Typescript，則需要更新tsconfig.json中的導入路徑
• 您可以考慮 Webpack 和 Typescript 中的導入路徑別名更明確地表明您的導入來自項目根目錄。 這里的說明