webpack, restrict what can be imported

Question

Is there a way in webpack to restrict what files can be imported?

Say I want to be able to import files that are in the same directory, as well as the parent directory, but nothing above that parent directory? For example:

These work

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

But this wouldn't work

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

Because that would go up two (or x number of) directories, instead of just one.

Answer 1

react-dev-utils has a plugin for this.

This Webpack plugin ensures that relative imports from app's source directories don't reach outside of it.

var path = require('path');
var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = {
  // ...
  resolve: {
    // ...
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
      // ...
    ],
    // ...
  },
  // ...
};