reactjs - 如何设置webpack的根目录

Question

我正在为 React Storybook 配置 Webpack，但导入语句路径有问题。当我正常运行我的应用程序时，我有这样的路径:

从“src/shared/utilities/stringManipulation”导入{constructURLName}；


我正在使用reactQL boilerplate它被配置为根据 src 文件夹返回正确的模块。我怎样才能在故事书中复制这一点？ Storybook 当前尝试在此处查找该 stringManipulation 文件:

/Users/me/development/reactQL/node_modules/src/shared/utilities/stringManipulation

所以它需要根据我的布局向上一个目录:

node_modules
src
  pages
  ...
  shared
    utilities
      stringManipulation

这就是我的 js/jsx 文件规则:

      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            query: {
              babelrc: false,
              presets: [
                ["env", { modules: false, exclude: ["transform-regenerator"] }],
                "react"
              ],
              plugins: [
                "transform-object-rest-spread",
                "syntax-dynamic-import",
                "transform-regenerator",
                "transform-class-properties",
                "transform-decorators-legacy"
              ]
            }
          }
        ]
      }, 

如何正确设置src目录？谢谢!

Answer 1

您可以使用resolve.modules。

const path = require('path');
const config = {
    ...
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, './'),
        ]
    }