在 webpack 中使用带有 es6 模块和打字稿的文件加载器 [英] Using file-loader with es6 modules and typescript in webpack

问题描述

webpack.config.js:

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

当我使用 javascript 时，这是有效的:

When I was using javascript, this worked:

entry.js:

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

但是我已经转向使用 (ts-loader) 的打字稿，所以我稍微修改了我在 entry.ts 中所做的:

But I have moved to typescript, using (ts-loader), so I slightly modified what I was doing in entry.ts:

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

但这现在给了我一个错误:

but this now gives me an error:

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

推荐答案

找不到模块复制！../src/index.html".

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

必须声明不是用 TypeScript 编写的外部模块.

External modules not written in TypeScript must be declared.

只需使用此处定义的 require 函数:https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

just use the require function as defined here : https://github.com/TypeStrong/ts-loader#code-splitting-and-loading-other-resources

代码:

declare var require: {
  <T>(path: string): T;
  (paths: string[], callback: (...modules: any[]) => void): void;
  ensure: (
    paths: string[],
    callback: (require: <T>(path: string) => T) => void
  ) => void;
};

这篇关于在 webpack 中使用带有 es6 模块和打字稿的文件加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！