Attempting to include HTML content into a variable using TypeScript and webpack has been my challenge.
This is the current setup:
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: {
// Include '.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>
Upon attempting to compile with webpack:
$ ./node_modules/.bin/webpack
[at-loader] Using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b1bcd5e5bfccd5c9dfccc288d8ffedbcb9">[email protected]</a> from typescript and "tsconfig.json" from /tmp/test/tsconfig.json.
[at-loader] Validation carried out in a separate process...
[at-loader] Finished verification with 1 issue
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: Module './template.html' not found.
I've spent half a day on this task and can confirm that template.html is located where it should be.
Based on the webpack configuration, the html-loader should preprocess the file first so as to load the HTML content into the variable. It worked correctly with ES6 previously...
Could someone advise me on loading HTML content into a variable using webpack/typescript? Alternatively, point out any flaws in my approach.