无法使用 ts-loader 和 webpack 解析声明

Question

Context

• "ts-loader": "^6.2.1",
• "typescript": "^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

In order to import .html file, i am using the following declaration in a file html-loader.ts :

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

This declaration is used in an other file as follow:

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

...

The project is built using webpack and ts-loader .

Here is the content of tsconfig.json used by ts-loader .

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

Here is the 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' ],
  },
};

The bundles are built but the built command webpack exit with error code 130 and the following message:

Module not found: Error: Can't resolve 'html-loader' in '/path/to/file_that_use_declaration'

Any idea?

Answer 1

Using raw-loader webpack plugin did the trick.

First, install using npm install raw-loader --save-dev .

Here is the 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' ],
  },
};

Here is the html-loader.ts containing the declaration:

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

The file is imported as following with import HTMLVariable from './template.html'; .