وارد کردن HTML از تایپاسکریپت با وبپک

من سعی میکنم HTML را با استفاده از وبپک در یک متغیر در تایپاسکریپت وارد کنم.

این تنظیمات من است:

package.json:

{
  "devDependencies": {
    "awesome-typescript-loader": "^3.2.3",
    "html-loader": "^0.5.1",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0"
  }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.join(__dirname),
  entry: './main',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js'
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".js"],
    modules: [
      "node_modules",
      path.join(__dirname, 'app'),
    ],
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.html$/,
        loader: 'html-loader',
      },
      // Faster alternative to ts-loader
      { 
        test: /\.tsx?$/, 
        loader: 'awesome-typescript-loader',
        options: {
          configFileName: 'tsconfig.json',
        },
        exclude: /(node_modules)/,
      },
    ],
  },  
};

main.ts:

import template from './template.html';
console.log(template);

template.html:

<p>Hello World !</p>

وقتی سعی میکنم با وبپک کامپایل کنم:

./node_modules/.bin/webpack 

[at-loader] Using [email  from typescript and "tsconfig.json" from /tmp/test/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 1 errors
Hash: d06d08edc313f90c0533
Version: webpack 3.6.0
Time: 2194ms
 Asset     Size  Chunks             Chunk Names
app.js  2.72 kB       0  [emitted]  main
   [0] ./main.ts 136 bytes {0} [built]
   [1] ./template.html 40 bytes {0} [built]

ERROR in [at-loader] ./main.ts:1:22 
    TS2307: Cannot find module './template.html'.

من نصف روز است که روی این کار کردهام، بنابراین میتوانید مطمئن باشید template.html همان جایی است که باید باشد.

از آنچه من از پیکربندی webpack میفهمم، html-loader قرار است ابتدا فایل را پردازش کند، بنابراین باید محتوای فایل html را در متغیر بارگذاری کند. حداقل، این قبلاً با es6 کار میکرد...

آیا کسی میتواند به من بگوید چگونه HTML را با استفاده از وبپک/تایپاسکریپت در یک متغیر بارگذاری کنم؟ یا حداقل بگوید چه چیزی در روش من اشتباه است.

پاسخ شماره ۱

یک راهحل آسان این است که هنگام بارگذاری منابع غیر TypeScript، از «require» در CommonJS استفاده کنید:

const template = require('./template.html');

اگر ترجیح میدهید همچنان از import استفاده کنید، امکان پیکربندی کامپایلر تایپاسکریپت برای بارگذاری فایل به صورت رشته وجود دارد. روش زیر برای من در نسخه ۲.۴.۲ تایپاسکریپت کار کرد.

این بلوک را به فایل اعلام نوعهای پروژه خود اضافه کنید (فایل من به نام typings.d.ts است):

// typings.d.ts
declare module '*.html' {
  const content: string;
  export default content;
}

اکنون باید بتوانید فایلهای HTML را به این صورت وارد کنید:

// main.ts
import template from './template.html';
console.log(template); // <p>Hello world !</p>

افشای کامل: پروژه من از بارگذارهای متفاوتی نسبت به شما استفاده کرده است (مشاهده در زیر).

// webpack.config.js
config.module = {
  rules: [
    {
      test: /\.ts$/,
      loader: '@ngtools/webpack'
    },
    {
      test: /\.html$/,
      use: 'raw-loader'
    }
  ]
}

در اینجا یک بحث در گیتهاب وجود دارد که در آن راهحلهای دیگر مورد بررسی قرار گرفتهاند.