Question

我正在配置webpack for react storybook，我遇到了import语句路径的问题。当我正常运行我的应用程序时，我有一条这样的路径：

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, './'),
        ]
    }

如何为webpack设置根目录

1 个答案: