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/， 所以绝对路径不是一种选择。

如果我在开发环境中使用相对路径，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

有没有办法在开发环境中设置路径，以便从正确的文件夹加载资产？ 或者在我运行 build:prod 时更改 img src 以重温？

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

<img src="imageA.jpg">

这将在 run 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

我想我有同样的问题。我也在使用 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 文件（这通常在简单的 webpack html 加载器配置中完成），并且选项正在禁用标签属性处理，因为您希望 HTML5 基本元素正确地添加相对 url：

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

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

这样做意味着您可以从项目中删除 @easy-webpack/config-html 依赖项，因为它不再被使用。

希望这会有所帮助！

Answer 2

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

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