webpackを使用してtypescriptの変数にhtmlをインポートしようとしています。
これが私のセットアップです:
パッケージ.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 configから理解していることは、html-loaderが最初にファイルを処理することになっているため、htmlファイルのコンテンツを変数にロードする必要があるということです。少なくとも、これはes6で動作していました...
webpack / typescriptを使用してhtmlを変数にロードする方法を教えてもらえますか? または、少なくとも私のアプローチの何が問題なのですか。