找不到模塊：錯誤：無法解析“./templates”

Question

我有這個 javascript (TypeScript) 文件

索引.ts

import 
'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import * as templates from './templates';

document.body.innerHTML = templates.main;

const mainElement = 
document.body.querySelector('.b4.main');
const alertsElement = 
document.body.querySelector('.b4-alerts');

mainElement.innerHTML = templates.welcome;
alertsElement.innerHTML = templates.alert;

當我運行我的項目（使用 webpack 開發服務器）時，出現以下錯誤：

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

我不明白為什么它似乎找不到“templates.ts”，因為這兩個文件都在同一個文件夾中。

這是我的項目結構的圖片：

我的 webpack 配置：

'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>
`; 

任何人都可以看到有什么問題嗎？

Answer 1

試試這是否有效。 這將允許從沒有點的文件夾中導入。

import {main, welcome, alert} from './templates';

默認情況下，Webpack 不會查找.ts文件。 您可以配置 resolve.extensions 來查找.ts 。 不要忘記添加默認值，否則大多數模塊都會中斷，因為它們依賴於自動使用.js擴展名的事實。

resolve: {
    extensions: ['.ts', '.js', '.json']
}

這也適用於所有其他文件，例如.scss文件等。錯誤將是SassError: Can't find stylesheet to import.