Aurelia JS webpack骨架相对资产路径

Question

我有一个Aurelia应用程序，其文件结构如下。 我使用aurelia skeleton-typescript-webpack 1.0.0

|-- assets
    |-- images
        |-- imageA.jpg
        |-- imageB.jpg
|-- src
    |-- app.ts
    |-- main.ts
    |--views
        |-- viewA.ts
        |-- viewA.html

现在在viewA.html中，如果我想链接图像，我使用绝对路径：

<img src="/assets/images/imageA.jpg">

但在制作时，该应用程序将位于： http ： //domain.com/app/ ，因此绝对路径不是一个选项。

如果我在dev环境中使用相对路径，aurelia-loader-webpack抛出一个无法解决的错误。

<img src="assets/images/imageA.jpg">

Module not found: Error: Can't resolve './assets/images/imageA.jpg' in '/app/src/views'
 @ ./src/views/viewA.html 1:191-213
 @ ./src ^\.\/.*$
 @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js

有没有办法在dev环境中设置路径，以便从右侧文件夹加载资源？ 或者，当我运行build：prod时，将img src更改为重新启动？

最终我想做的是在我的模板中使用它：

<img src="imageA.jpg">

这将在运行dev env上的绝对/ assets / images /以及build prod上的相对assets / images /上进行转换。

我想这是我可以在webpack.config.ts中做的事情，但找不到办法。

编辑，这是webpack加载器

{ loaders: 
   [ { test: /\.tsx?$/,
       loader: 'awesome-typescript',
       exclude: [Object] },
     { test: /\.html$/, loader: 'html', exclude: [Object] },
     { test: /\.scss$/i,
       loaders: '/App/node_modules/extract-text-webpack-plugin/loader.js?{"id":1,"omit":0,"remove":true,"notExtractLoader":"style"}!css!sass' },
     { test: /\.css$/i,
       loaders: '/App/node_modules/extract-text-webpack-plugin/loader.js?{"id":2,"omit":0,"remove":true,"notExtractLoader":"style"}!css' },
     { test: /\.(png|gif|jpg)$/, loader: 'url', query: [Object] },
     { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: 'url',
       query: [Object] },
     { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: 'url',
       query: [Object] },
     { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: 'file' } 
] }

Answer 1

我用html-loader （ https://github.com/webpack/html-loader ）加载html并使用url-loader

module: {
   loaders: [
     ...
     { test: /\.html$/, loader: 'html' },
     { test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
     ...
   ]
}

Answer 2

我想我有同样的问题。 我还使用了Aurelia webpack骨架。 我的解决方案是使用html-loader （已经建议），但也从我的webpack配置中删除以下代码：

html(<any>{overrideOptions: {
    metadata: Object.assign(get(this, 'metadata', {}), {baseUrl: baseUrl})
}}),

这是因为Aurelia webpack骨架使用简单的webpack来配置webpack。 默认情况下，easy webpack的上述代码片段会加载所有html文件，但我们希望自己加载这些html文件并添加一些额外的配置。 由于webpack重写了重复的配置，我的html-loader配置（设置在上面的代码之上）被忽略了。

现在您的项目正在使用您的加载器（而不是简单的webpack），您需要为html-loader设置一些额外的选项：

{
    test: /\.html$/,
    loader: 'html-loader',
    exclude: [path.join(__dirname, 'index.html')],
    options: {
        attrs: false
    }
}

排除行忽略你的index.html文件（这通常在easy webpack html loader config中完成），并且选项是禁用标记属性处理，因为你希望你的HTML5基本元素正确地预先添加相对url：

要完全禁用标记属性处理（例如，如果您在客户端处理图像加载），则可以传入attrs = false。

最后是确保你的img src属性是相对的！ （它不应该以/开头）

执行所有这些操作意味着您可以从项目中删除@easy-webpack/config-html依赖项，因为它不再被使用。

希望这可以帮助！