webpack，限制可以导入的内容

Question

webpack中是否有一种方法可以限制可以导入哪些文件？

假设我希望能够导入同一目录以及父目录中的文件，但是该父目录之上没有任何内容？例如：

这些工作

import { blah } from "./script.js";

import { blah2 } from "./../gui/textbox.js";

import { blah3 } from  "./../I/can/go/as/deep/down/as/I/want/here.js";

但这行不通

import { passwords } from "./../../passwords.txt";

因为那将上升两个（或x个）目录，而不是一个。

Answer 1

您可以创建一个加载器来将 webpack 导入限制为特定文件。

// file: webpack.config.js
const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('my-webpack-loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

如果资源文件位于目录或您选择的任何目录之外，则抛出./src异常./node_modules。

// file: my-webpack-loader.js
const { getOptions } = require('loader-utils');
const validateOptions = require('schema-utils');
const path = require('path');

const schema = {
  type: 'object',
  properties: {
    test: {
      type: 'string'
    }
  }
};

function handler(source) {
  const options = getOptions(this);

  if(this.resourcePath.indexOf(path.resolve('./node_modules')) !== 0) {
    if(this.resourcePath.indexOf(path.resolve('./src')) !== 0) {
      throw `Reseource loading restricted for ${this.resourcePath}`;
    }
  }

  validateOptions(schema, options, 'My Webpack Loader');

  return source;
}

module.exports = handler;

有关更多信息，请参阅编写 webpack 加载器。