我无法在我的 headercomponent.ts 中导入图像。 我怀疑这是因为我在编译 ts(使用 webpack ts loader)时做错了什么,因为同样的事情适用于 react(组件是用 es6 编写的)
错误位置为
//headercomponent.ts
import {Component, View} from "angular2/core";
import {ROUTER_DIRECTIVES, Router} from "angular2/router";
import {AuthService} from "../../services/auth/auth.service";
import logoSource from "../../images/logo.png"; //**THIS CAUSES ERROR** Cannot find module '../../images/logo.png'
@Component({
selector: 'my-header',
//templateUrl:'components/header/header.tmpl.html' ,
template: `<header class="main-header">
<div class="top-bar">
<div class="top-bar-title">
<a href="/"><img src="{{logoSource}}"></a>
</div>
我的webpack配置是
// webpack.config.js
'use strict';
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = path.join(__dirname,'public');
//const TARGET = process.env.npm_lifecycle_event;
console.log("bp " + basePath)
module.exports = {
entry: path.join(basePath,'/components/boot/boot.ts'),
output: {
path: path.join(basePath,"..","/build"), // This is where images AND js will go
publicPath: path.join(basePath,"..","/build/assets"),
// publicPath: path.join(basePath ,'/images'), // This is used to generate URLs to e.g. images
filename: 'bundle.js'
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
module: {
preLoaders: [ { test: /\.tsx$/, loader: "tslint" } ],
//
loaders: [
{ test: /\.(png!jpg)$/, loader: 'file-loader?name=/img/[name].[ext]' }, // inline base64 for <=8k images, direct URLs for the rest
{
test: /\.json/,
loader: 'json-loader',
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: [/node_modules/]
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: [/node_modules/],
loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
},
// fonts and svg
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
]
},
resolve: {
// now require('file') instead of require('file.coffee')
extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6', 'png']
},
devtool: 'source-map'
};
我的目录结构是这样的
-/
-server/
-build/
-node-modules/
-public/
-components/
-boot/
-boot.component.ts
-header/
-header.component.ts
-images/
-logo.png
-services/
-typings/
-browser/
-main/
-browser.d.ts
-main.d.ts
-tsconfig.json
-typings.json
我的tsconfig文件如下:
//tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
我怀疑我在 typescript 编译中搞砸了一些东西,不确定是什么
最佳答案
问题是你混淆了 TypeScript 级别的模块和 Webpack 级别的模块。
在 Webpack 中,您导入的任何文件都会通过一些构建管道。
在 TypeScript 中只有 .ts
和 .js
文件是相关的,如果您尝试 import x from file.png
TypeScript 不会知道如何处理它,TypeScript 不使用 Webpack 配置。
在您的情况下,您需要分离关注点,对 TypeScript/EcmaScript 代码使用 import from
,对 Webpack 细节使用 require
。
您需要让 TypeScript 忽略这种特殊的 Webpack require
语法,在 .d.ts
文件中定义如下:
declare function require(string): string;
这将使 TypeScript 忽略 require 语句,Webpack 将能够在构建管道中处理它。
关于express - webpack 无法导入图像(在 typescript 中使用 express 和 angular2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36148639/