如何设置webpack的“preferRelative”选项?

s3fp2yjn  于 2022-11-24  发布在  Webpack
关注(0)|答案(1)|浏览(331)

我在项目开始时还没有使用Webpack 5开发React,现在想添加它。我的问题是,我使用的是相对路径,当运行Webpack时,它会向我抛出以下错误消息:
找不到模块:错误:无法解析..."Scripts\react\src"中的"App"。您的意思是"./App"吗?
作为一个解决方案,我可以添加一个'./'到所有的导入路径,但这本身将是一个巨大的任务,我想避免。
另一条消息建议如下:
如果无法更改源代码,则还有一个名为"preferRelative"的解析选项,它也会尝试在当前目录中解析这些类型的请求
我的问题是如何以及在哪里设置这个"preferRelative"选项?我已经研究了一整天,但没有找到任何解决我的问题的方法。
这是我的webpack.config.js供参考:

const path = require("path");
const WebpackNotifierPlugin = require("webpack-notifier");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  devtool: "inline-source-map",
  plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()],
  resolve: {
    extensions: [".js", ".jsx", ".ts"],
  },
};

非常感谢您的帮助!

jm81lzqq

jm81lzqq1#

以下是该选项的文档:https://webpack.js.org/configuration/resolve/#resolvepreferrelative
你应该把它放在你的resolve选项中,如下所示:

resolve: {
    extensions: [".js", ".jsx", ".ts"],
    preferRelative: true
  },
};

相关问题