Webpack-Datei-Loader lädt keine Dateien mit komplexen Pfaden

Question

Ich habe ein Projekt, das Typescript 2.4.1 verwendet, Webpack 2.6.1, und ich habe Probleme, relative Pfade zum Laden meiner Bilder richtig zu bekommen.

Wenn ich ein Bild in dem gleichen Ordner wie meine .ts Datei setzen, die es lädt, ich kann es die Arbeit an:

const background = require("./background.png"); 
console.log(background); 

So funktioniert das:

src 
    Book.ts 
    background.png 

Aber ich kann‘ Finde heraus, wie man Dateilader das Bild mit dieser Struktur findet:

src 
    Book.ts 
assets 
    background.png 

Ich habe versucht, dieeinstellenin den Datei-Loader-Optionen wie beschrieben here, aber ich konnte nicht die Datei auf diese Weise laden, egal, welche Kombinationen von absoluten und relativen Pfade habe ich versucht.

Hier ist meine Datei webpack.config.js. (Ich entfernte einige Teile, weil es lange dauert.)

module.exports = { 
    entry: { 
     app: [ 
      path.resolve(__dirname, './src/main.ts') 
     ], 
     vendor: ['pixi', 'p2', 'phaser', 'webfontloader'] 
    }, 
    output: { 
     pathinfo: true, 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: './dist/', 
     filename: 'bundle.js' 
    }, 
    module: { 
     rules: [ 
      {test: /\.ts$/, enforce: 'pre', loader: 'tslint-loader', options: {emitErrors: true, failOnHint: true}}, 
      {test: /\.ts$/, loader: 'ts-loader'}, 
      {test: /pixi\.js/, use: ['expose-loader?PIXI']}, 
      {test: /phaser-split\.js$/, use: ['expose-loader?Phaser']}, 
      {test: /p2\.js/, use: ['expose-loader?p2']}, 
      {test: /\.(png|svg|jpg|gif|mp3|wav|mp4)$/, use: [{ 
       loader: 'file-loader', 
       options: { 
        outputPath: 'assets/' 
       } 
      }]}, 
      {enforce: "pre", test: /\.js$/, loader: "source-map-loader"} 
     ] 
    }, 
    node: { 
     fs: 'empty', 
     net: 'empty', 
     tls: 'empty' 
    } 
} 

Und hier ist meine Typoskript Erklärung bedürfen:

declare let require: { 
    <T>(path: string): T; 
    (paths: string[], callback: (...modules: any[]) => void): void; 
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void; 
}; 

(Ich habe versucht, nett ES6 Importe immer arbeiten, aber das ging nicht gut.)

Answer 1

ich es mit Datei-loader versucht und es hat nicht wirklich funktioniert ...

versuchen "url-loader" mit wie dies in webpack.config:

// "url" loader works like "file" loader except that it embeds assets 
    // smaller than specified limit in bytes as data URLs to avoid requests. 
    // A missing `test` is equivalent to a match. 
    { 
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 
    loader: require.resolve('url-loader'), 
    options: { 
     limit: 10000, 
     name: 'static/media/[name].[hash:8].[ext]', 
    }, 
    }, 

Dann können Sie "nur" verwenden, um dies den Weg zu bekommen, die Sie dann verwenden können:

const imageSrc = import('./relativePathToImgFile'); 

Edit: Und vergessen Sie nicht, url-Loader in den package.json :)