Webpack无法解决相关路径导入表示静态

Question

我正在开发一个outlook，我有一个正在运行的快递服务器。我设置webpack是因为我需要将js转换到es5以使它在Outlook中工作。以下是简化的项目结构。

/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中，我用es6模块导入ssoAuth.js和相对路径：

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

当我运行节点./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文件。考虑删除类型记录扩展
• 如果使用的是类型记录，则需要更新tsconfig.json中的导入路径。
• 您可以在Webpack和类型记录中考虑导入路径别名，以更明确地说明您的导入来自项目根。这里的说明