Dynami c импорт текстовых файлов в webpack

Question

Обычно, когда нам нужно импортировать необработанную строку, мы используем raw-loader. Обычно используется следующий вариант:

1. В исходный код мы добавляем:

let data = (await import(/* webpackChunkName: "a.txt" */"./a.txt")).default;
console.log(a.default) 

Сгенерирует файл a.txt.js, который будет содержать:

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{37:function(e,n){e.exports='CONTENT_OF_TXT_FILE'}}]);

Исходный код, в котором мы выполняем импорт, создаст элементы, которые добавят <script charset="utf-8" src="/a.txt.js"></script> в раздел HTML HEAD.

После того, как браузер оценит оба сценария, webpack magi c сделает его похожим на импорт es6.

Хорошо, вот как обычно выглядит импорт es6. А raw-loader выглядит как хак с импортом динамиков c. НО можно ли просто скопировать a.txt в целевой каталог вместо того, чтобы делать его модулем es6? Мне нужно элегантное решение без написания неприятных оболочек с помощью XmlHttlRequest. Есть ли такой плагин в webpack?

Есть и другие похожие инструменты:

• file-loader - копирует файл в каталог dist и возвращает имя файла. Эта вещь по-прежнему требует некоторых оболочек и выглядит не так элегантно, как es6-module.
• html-loader - поддерживает только html, анализируя его и ища атрибуты src.

Answer 1

Вот как это можно сделать:

1. Полностью удалите импорт a.txt из кода. Это означает, что нельзя использовать: import/import()/require()/url(..)/@import в дереве зависимостей точек входа.
2. Используйте copy-webpack-plugin для копирования a.txt в папку dist. Например, например:

    plugins: [
        new CopyPlugin([
          {
              from: './src/a.txt',
              to: './'
          }])
      ]

Реализуйте свой собственный необработанный вызов для получения a.txt, например:

fetch('./a.txt')
    .then(r => r.text())
    .then(console.log)

---

Дополнительные пояснения: webpack не анализирует ключевое слово fetch как вызов импорта. Он оставит все как есть в выпущенном комплекте. В отличие от обычных модулей, которые он активирует загрузчики / плагины, чтобы сделать их. js moudle и вставить их как вызов функции в карту модулей фрагментов, например:

,(function(module, __webpack_exports__, __webpack_require__) {
    module.exports = <module_code>
}, __next_module_in_bundle__