Webpack文件加载器不加载具有复杂路径的文件

Question

我有一个项目，使用Typescript 2.4.1，Webpack 2.6.1，我有一些问题获得相对路径来正确加载我的图像。

如果我把图像在同一文件夹作为我.ts文件加载它，我可以得到它的工作：

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

所以此工程：

src 
    Book.ts 
    background.png 

但我可以”不知道如何使文件加载器找到这个结构的图像：

src 
    Book.ts 
assets 
    background.png 

我试着设置publicPath在here中描述的文件加载器选项中，但无论如何无论如何无论如何都无法加载文件，无论我尝试使用绝对路径和相对路径的组合。

这是我的webpack.config.js文件。 （我删除了一些部件，因为它是长。）

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' 
    } 
} 

这是我的打字稿需要声明：

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; 
}; 

（我试过越来越漂亮ES6进口的工作，但并不顺利。）

Answer 1

我与文件装载机尝试过了，它并没有真正的工作...

尝试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]', 
    }, 
    }, 

然后你就可以“只是”用它来获取，然后可以使用路径：

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

编辑：不要忘记添加网址，装载机的package.json :)