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

Question

上下文

• "webpack-cli"：

• “ts-loader”："^6.2.1"，

• “打字本”："^3.7.2"，

• "webpack"："^4.41.2"，"^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.构建。

以下是ts-loader使用的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_use_use_宣告’中的‘html-加载程序’

知道吗？

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';导入的。