Не удается разрешить объявление с помощью ts-loader и webpack

Question

Контекст

• "ts-loader": "^ 6.2.1",
• "машинопись": "^ 3.7.2",
• "webpack ":" ^ 4.41.2 ",
• " webpack-cli ":" ^ 3.3.9 ",
• " webpack-dev-middleware ":" ^ 3.7.2 ",
• "webpack-dev-server": "^ 3.9.0"

Issue

Чтобы импортировать файл .html, я использую следующееобъявление в файле html-loader.ts:

declare module "html-loader!*" {
    const content: string;
    export default content;
}

Это объявление используется в другом файле следующим образом:

import htmlcode from 'html-loader!./template.html';

...

Проект построен с использованием webpack и ts-loader.

Вот содержимое tsconfig.json, используемое ts-loader.

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [ "es2015", "dom" ],
    "sourceMap": true,
    "esModuleInterop": true,
    "removeComments": true,
    "noEmitOnError": true,
    "declaration": true
  }
}

Вот webpack.config.js:

const path = require('path');

module.exports = {
  entry: {
    'lib': './src/index.ts',
  },
  devtool: 'source-map',
  mode: 'development',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
      rules: [
        {
            test: /\.ts$/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
      ]
  },
  resolve: {
    extensions: [ '.ts', '.js' ],
  },
};

Связки собраны, но встроенная команда webpack завершается с кодом ошибки 130 и следующим сообщением:

Модуль не найден: Ошибка: невозможно разрешить 'html-загрузчик 'in' / path / to / file_that_use_declaration '

Есть идеи?

Answer 1

Используя raw-loader плагин webpack сделал свое дело.

Сначала установите с помощью npm install raw-loader --save-dev.

Вот здесь webpack.config.js:

const path = require('path');

module.exports = {
  entry: {
    'lib': './src/index.ts',
  },
  devtool: 'source-map',
  mode: 'development',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  module: {
      rules: [
        {
            test: /\.ts$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.html$/,
            use: 'raw-loader',
        }
      ]
  },
  resolve: {
    extensions: [ '.ts', '.js' ],
  },
};

Здесьhtml-loader.ts содержит объявление:

declare module '*.html' {
  const content: any;
  export default content;
}

Файл импортируется следующим образом с import HTMLVariable from './template.html';.