webpack не может импортировать изображения (с использованием выражения и углового2 в машинописи)

Я не могу импортировать изображения в свой headercomponent.ts. Я подозреваю, что это из-за чего-то, что я делаю неправильно при компиляции ts (используя загрузчик webpack ts), потому что то же самое работает с реакцией (где компоненты написаны на 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"
      ]
    }

Я подозреваю, что я кое-что испортил в сборке машинописных текстов, не уверен, что

ОТВЕТЫ

Ответ 1

Проблема в том, что вы смешиваете модули уровня TypeScript и модули уровня Webpack.

В Webpack любой файл, который вы импортируете, проходит через какой-то конвейер сборки.

В .ts только для .ts только .ts и .js актуальны, и если вы пытаетесь import x from file.png TypeScript просто не знает, что с ним делать, конфигурация Webpack не используется TypeScript.

В вашем случае необходимо отделить проблемы, использование import from для машинописи кода /ECMAScript и использования require для WebPack конкретики.

Вам нужно будет заставить TypeScript игнорировать этот специальный .d.ts require синтаксиса, с таким же определением в файле .d.ts:

declare function require(string): string;

Это заставит TypeScript игнорировать требования, и Webpack сможет обработать его в конвейере сборки.

Ответ 2

Вместо:

import image from 'pathToImage/image.extension';

Использование:

const image = require('pathToImage/image.extension');

Ответ 3

я использую

import * as myImage from 'path/of/my/image.png';

и создал определение машинописного текста с помощью

declare module "*.png" {
    const value: any;
    export = value;
}

Это работает только тогда, когда у вас есть правильный обработчик, такой как файловый загрузчик в webpack. Поскольку этот обработчик даст вам путь к вашему файлу.

Ответ 4

У меня также была такая же проблема, поэтому я использовал следующий подход:

import * as myImage from 'path/of/my/image';

В моем компоненте я просто назначил импортированное изображение члену данных;

export class TempComponent{
    public tempImage = myImage;
}

и использовал его в шаблоне как:

<img [src]="tempImage" alt="blah blah blah">

Ответ 5

Небольшое улучшение ответа Христиан Сторновски было бы сделать дефолт экспорта, т.е.

declare module "*.png" {
  const value: string;
  export default value;
}

Таким образом, вы можете импортировать изображение, используя:

import myImg from 'img/myImg.png';

Ответ 6

Если вы хотите использовать синтаксис ES6 для импорта.

Сначала убедитесь, что в вашем tsconfig.json есть:

target: 'es5',
module: 'es6'

Следующее должно теперь работать:

import MyImage from './images/my-image.png';

Ответ 7

Чтобы иметь возможность использовать импорт по умолчанию, как это:

import grumpyCat from '../assets/grumpy_cat.jpg';

Определите объявление модуля jpg:

declare module "*.jpg" {
const value: string;
  export default value;
}

и в вашем tsconfig используйте "module": "es6" (см. комментарий @vedran выше) или когда вы используете "module": "commonjs" добавьте "esModuleInterop": true,

  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true,
...

Источник: https://github.com/TypeStrong/ts-loader/issues/344#issuecomment-381398818