webpack无法导入图像（在typcript中使用express和angular2） [英] webpack not able to import images( using express and angular2 in typescript)

问题描述

我无法在我的headercomponent.ts中导入图像。
我怀疑这是因为我在编译ts（使用webpack ts loader）时发生错误，因为同样的事情与反应（组件在es6中编写）有关。

I am not able to import images in my headercomponent.ts. I suspect it is because of something i am doing wrong while compiling ts(using webpack ts loader) because same thing works with react( where the components are written in 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配置是

my webpack config is

// 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文件如下： p>

my tsconfig file is as follows:

 //tsconfig.json
     {
      "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      },
      "exclude": [
        "node_modules"
      ]
    }

我怀疑我在打字机中搞乱了一些东西ript编译，不知道什么

I suspect I am messing some thing in typescript compilation , not sure what

推荐答案

问题是您混淆了TypeScript级别模块和Webpack级别模块。

The problem is that you confuse TypeScript level modules and Webpack level modules.

在Webpack中，您导入的任何文件都将通过一些构建管道。

In Webpack any file that you import goes through some build pipeline.

仅限于Typescript .ts 和 .js 文件是相关的，如果您尝试从file.png导入x TypeScript只是不知道该怎么做，Webpack配置不被TypeScript使用。

In Typescript only .ts and .js files are relevant and if you try to import x from file.png TypeScript just does not know what to do with it, Webpack config is not used by TypeScript.

在您的情况下，您需要分开问题，使用从导入TypeScript / EcmaScript代码，并使用 require 作为Webpack的细节。

In your case you need to separate the concerns, use import from for TypeScript/EcmaScript code and use require for Webpack specifics.

你将需要在 .d.ts 文件中，使TypeScript忽略这个特殊的Webpack require 语法。

You would need to make TypeScript ignore this special Webpack require syntax with a definition like this in a .d.ts file:

declare function require(string): string;

这将使TypeScript忽略require语句，Webpack将能够在构建管道中处理它。

This will make TypeScript ignore the require statements and Webpack will be able to process it in the build pipeline.

这篇关于webpack无法导入图像（在typcript中使用express和angular2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！