Динамический импорт текстовых файлов в webpack

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

  1. В исходный код добавляем:
let data = (await import(/* webpackChunkName: "a.txt" */"./a.txt")).default;
console.log(a.default)
  1. Будет сгенерирован файл a.txt.js, который будет содержать:
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{37:function(e,n){e.exports='CONTENT_OF_TXT_FILE'}}]);

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

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

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

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

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

webpack dynamic-import raw-loader
person deathangel908    schedule 09.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

  1. Полностью удалите импорт .txt из кода. Это означает не использовать: import/import()/require()/url(..)/@import в дереве зависимостей точек входа.
  2. Используйте copy-webpack-plugin, чтобы скопировать .txt в папку dist. Как это, например:
    plugins: [
        new CopyPlugin([
          {
              from: './src/a.txt',
              to: './'
          }])
      ]
  1. Реализуйте свой собственный необработанный вызов, чтобы принести .txt, например:
fetch('./a.txt')
    .then(r => r.text())
    .then(console.log)

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

,(function(module, __webpack_exports__, __webpack_require__) {
    module.exports = <module_code>
}, __next_module_in_bundle__
person Raz Ronen    schedule 09.05.2020
comment
Я знаю этот способ. Кстати, нет необходимости жестко указывать имена источников с помощью Webpack.CopyPlugin, вы можете использовать их в исходном коде и использовать плагин загрузчика файлов, который я уже описал в своем вопросе. Если вы не передадите что-то через цепочку загрузчиков веб-пакетов, у вас будут проблемы с кешированием и т. Д. Кроме того, веб-сервер webpack-dev-server не будет автоматически перезагружать вашу страницу при изменении источника. Есть еще много предостережений. Таким образом, я определенно избежал бы большинства. - person deathangel908; 10.05.2020