I am trying to write a webpack loader but am unsure how to get the outcome I want.
Given some ts code like this
import Foo from './bar.lazy.txt'
I would like to have my loader return at code that creates a React component that uses an async import of the text file in question.
Any help or examples would be awesome. Thanks
I have tried a few approaches
Approach 1
- Add a loader for .txt files
- Add a loader for .lazy.txt files that returns the ts code that async imports the same path but with the .lazy removed
This approach doesn't seem to work because the .lazy.txt file doesn't actually exist. If I add an extensionAlias the loader isn't called because it maps to the raw txt file loader.
Approach 2
- name the file .lazy.txt
- add a loader that emits the txt file without lazy prefix and references the emitted file in the returned ts source
This approach seems viable but when I use emitFile that path doesn't resolve in from the returned typescript code. I am not sure if I need to emit it somewhere specific or somehow tell webpack about this source tree?