javascript - 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;

有关详细信息，请参阅 writing a webpack loader .