找不到模块:错误:无法解析“./templates”

我有这个javascript(typescript)文件

指数TS

导入 './node_modules/bootstrap/dist/css/bootstrap.min.css'; 导入“bootstrap”; 从“./templates”导入*作为模板; document.body.innerhtml=templates.main; 常量主元素= document.body.queryselector(“.b4.main”); 施工警报= document.body.queryselector(“.b4警报”); mainElement.innerhtml=templates.welcome; alertselement.innerhtml=templates.alert; < /代码>

当我运行我的项目(使用Webpack Dev Server)时,我得到以下错误:

module not found:error:can't resolve'/templates'in'/users/borisgrunwald/desktop/node/b4 app/app'
< /代码> 

我不明白为什么找不到“templates.ts”,因为两个文件都在同一个文件夹中。


这是我的项目结构图:



我的网络包配置:

'use strict';

const path=require('path');
const distdir=path.resolve(u dirname,'dist');

const html webpack plugin=需要(“html-webpack-plugin”);
const webpack=需要(“webpack”);

模块.导出={
条目:'./app/index.ts',
输出:{
文件名:'bundle.js',
路径:Distdir
}
DEVServer:{
ContentBase:distDir,
端口:60800
}
插件:
新建htmlwebpackplugin({
标题:“Better Book Bundle Builder”
}
新建Webpack.ProvidePlugin({
$:'jquery',
jQuery:jjQuery
})
,
模块:{
规则:【{
测试:/
装载机:'TS-LOADER'
},{
测试:/\css $ /;
使用:['style-loader'、'css-loader']
},{
测试:/(png woff woff2 eot ttf svg)$/,
加载器:'url-loader?限值=100000
}]
}
};
< /代码> 

模板.ts

export const main=`
<div class=“container”>
<h1>b4-书籍装订器</h1>
<DIV class=“B4警报”></DIV>
<DIV class=“B4主”></DIV>
&L/DIV & GT;
;

导出常量欢迎=`
<DIV class=“Jumbotron”>
<h1>欢迎!/lt/H1& gt;
<P>B4是用于创建图书编号的应用程序</P>
&L/DIV & GT;
;

导出常量警报=`
<DIV class=“警报成功警报可忽略淡入”
role=“警报”>
<button class=“close”data disclose=“alert”aria label=“close”>
<span aria hidden=“true”>&次;</span>
&按钮/按钮;
<STRONG>成功!</strong>引导正在工作
&L/DIV & GT;
`;
有人知道怎么了吗?

当我运行我的项目(使用Webpack Dev Server)时,我得到以下错误:

Module not found: Error: Can't resolve './templates' in '/Users/BorisGrunwald/Desktop/Node/b4-app/app'


我不明白为什么找不到“templates.ts”,因为两个文件都在同一个文件夹中。

以下是我的项目结构图:



我的网络包配置:

'use strict';

const path = require('path');
const distDir = path.resolve(__dirname,'dist');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

 module.exports = {
    entry: './app/index.ts',
    output: {
        filename: 'bundle.js',
        path: distDir
    },
    devServer: {
        contentBase:distDir,
        port:60800
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Better Book Bundle Builder'
        }),
        new webpack.ProvidePlugin({
            $:'jquery',
            jQuery:'jquery'
        })
    ],
    module: {
        rules: [{
            test:/\.ts$/,
            loader:'ts-loader'
        },{
            test: /\.css$/,
            use:['style-loader','css-loader']
        },{
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader:'url-loader?limit=100000'
        }]
    }
};


模板.ts

export const main = `
    <div class="container">
        <h1>B4 - Book Bundler</h1>
        <div class="b4-alerts"></div>
        <div class="b4-main"></div>
    </div>
`;

export const welcome = `
    <div class="jumbotron">
        <h1>Welcome!</h1>
        <p>B4 is an application for creating book bndles</p>
    </div>
`;

export const alert = `
    <div class="alert alert-success alert-dismissible fade in" 
role="alert">
        <button class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>Success!</strong> Bootstrap is working
    </div>
`; 


有人知道怎么了吗?