使用文件裝載在的WebPack ES6模塊和打字稿

Question

webpack.config.js：

resolveLoader: { 
    alias: { 
     'copy': 'file-loader?name=[path][name].[ext]&context=./src', 
    } 
}, 

當我使用JavaScript，這工作：

entry.js：

var index = require("copy!../src/index.html"); 

但我已經搬到了打字稿，使用（ts-loader），所以我稍微修改了我在做的entry.ts：

import * as index from 'copy!index.html'; 

但現在給我一個錯誤：

ERROR in ./src/entry.ts 
(3,24): error TS2307: Cannot find module 'copy!../src/index.html'. 

Answer 1

Cannot find module 'copy!../src/index.html'.

外部模塊不是寫在打字稿必須申報。

快速修復

只需使用require功能如下定義：https://github.com/TypeStrong/ts-loader#loading-other-resources-and-code-splitting

Answer 2

隨着打字稿2，你可以有通配符模塊聲明：

declare module "*!text" { 
    const content: string; 
    export default content; 
} 
// Some do it the other way around. 
declare module "json!*" { 
    const value: any; 
    export default value; 
} 

現在你可以導入匹配的東西「* ！text「或」json！*「。

import fileContent from "./xyz.txt!text"; 
import data from "json!http://example.com/data.json"; 
console.log(data, fileContent); 

Answer 3

alex's answer是一個偉大的，非常靈活。

我遇到了an alternative這是更具體的文件類型，所以它不太靈活，但不需要前綴/後綴。

1. 創建一個文件declare module '*.png'
2. 導入與import * as logo from "./ss-logo-transparent.png";