无法使用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”

问题

为了导入.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和以下消息：

  

找不到模块：错误：无法解析'/ path / to / file_that_use_declaration'中的'html-loader'

有什么想法吗？

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';。