[英]Import html from typescript with webpack
我正在嘗試使用webpack將html導入到typescript中的變量中。
這是我的設置:
的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>
當我嘗試使用webpack進行編譯時:
$ ./node_modules/.bin/webpack
[at-loader] Using typescript@2.5.3 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一起工作......
誰能告訴我如何使用webpack / typescript將html加載到變量中? 或者至少我的方法有什么問題。
一個簡單的解決方法是在加載非TypeScript資源時堅持使用CommonJS“require”:
const template = require('./template.html');
如果您更喜歡繼續使用import
,則可以配置TypeScript編譯器以將文件作為字符串加載。 下面的方法適用於TypeScript 2.4.2。
將此塊添加到項目的類型聲明文件中(我的名稱為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'
}
]
}
這里有一個Github線程,其中討論了其他解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.