title: How to setup absolute imports with bazel/webpack?
body: <p>I want to import a typescript module from one part of my repo at another part without having a bunch of "../.." in my imports to get back to the root folder of my bazel workspace. How can I setup absolute imports (relative to my workspace) for webpack? Do I need to set something in webpack.config.js? If so, what?</p>
  
  <p>Minimal setup to illustrate the issue below:</p>
  
  <p><em>Folder structure</em></p>
  
  <pre><code>folder1/
      moduleA.ts
      BUILD
  folder2/
      moduleB.ts
      BUILD
  WORKSPACE
  </code></pre>
  
  <p><em>WORKSPACE</em></p>
  
  <pre><code>workspace(
      name = "myworkspace",
  )
  
  ...
  </code></pre>
  
  <p><strong>* **<em>moduleA.ts</em></strong> ***</p>
  
  <pre><code>// TS COMPILER CAN FIND THIS BUT WEBPACK CAN'T FIND THIS
  import { thing } from "myworkspace/folder2/moduleB";  
  
  ...
  </code></pre>
  
  <p><em>folder1/BUILD</em></p>
  
  <pre><code>load("@npm_bazel_typescript//:index.bzl", "ts_library")
  load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")
  
  ts_library(
      name = "moduleA",
      srcs = ["moduleA.ts"],
      deps = [
          "//folder2:moduleB",
      ],
  )
  
  filegroup(
      name = "moduleA.js",
      srcs = [
          "moduleA",
      ],
      output_group = "es6_sources",
      visibility = ["//visibility:public"],
  )
  
  webpack(
      name = "bundle",
      outs = ["app.bundle.js"],
      args = [
          "$(locations :moduleA.js)",
          "--config",
          "$(execpath //:webpack.config.js)",
          "-o",
          "$@",
      ],
      data = [
          ":moduleA.js",
          "//:webpack.config.js",
          "@npm//:node_modules",
      ],
      visibility = ["//visibility:public"],
  )
  </code></pre>