Question

我想创建一个具有父/子结构的项目，如果不存在某个文件，它将取自具有此代码的最接近的父项，因此在示例结构的情况下，如果我构建子结构，它将使用init.ts来自孩子，来自父母的file.ts和来自祖父母的file2.ts。我设法使用模块来完成此操作，因此，如果我从“文件”中导入某些内容，它将首先尝试在子级中找到它，然后在父级中找到它，然后在祖父母中找到它，但不是将其作为模块加载，而是想通过相对路径（如导入）加载来自'./file'的内容，如果它不在该路径中，则应该从webpack 1的父/ granparent中加载，可以使用resolve.roots，但是我不知道如何在webpack 4中实现它。

这是我的项目结构 init.ts只需导入file和file2

祖父母

init.ts
file.ts
file2.ts

父母

file.ts

儿童

init.ts

index.ts

webpack.config.js

tsconfig.json

//index.ts
import 'init';

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
enter code here
module.exports = {
  entry: './index.ts',
  mode: 'production',
  resolveLoader: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'loaders')
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    })
  ],
  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    modules: [
      // ta czesc będzie dynamiczna na podstawie configów :)
      path.resolve('./children'),
      path.resolve('./parent'),
      path.resolve('./grandparent'),
      path.resolve('./node_modules')
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "*": [
        "children/*",
        "parent/*",
        "grandparent/*"
      ]
    }
  }
}

Webpack 4如何在文件不在同一目录中的情况下加载其他文件

0 个答案: