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

我尝试按照 here 所述在文件加载器选项中设置 publicPath 但无论绝对路径和相对路径的组合如何，我都无法以这种方式加载文件我试过了。

这是我的 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

我用 file-loader 试过了，但没有用...

尝试在 webpack.config 中像这样使用 "url-loader":

  // "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]',
    },
  },

然后你可以"just"使用它来获取你可以使用的路径：

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

编辑：不要忘记将 url-loader 添加到 package.json :)

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

Webpack file-loader not loading files with complex paths

javascript

typescript

webpack

webpack-file-loader