如何为webpack设置根目录

Question

我正在为react storybook配置webpack，并且我在导入语句路径方面遇到了问题。当我正常运行我的应用程序时，我有一个这样的路径：

import { constructURLName } from "src/shared/utilities/stringManipulation";

我使用的是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, './'),
        ]
    }