奥瑞莉亚·JS·webpack骨架相对资产路径

Question

我有一个Aurelia应用程序，它的文件结构如下所示。我使用的是aurelia骨架-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会抛出can't resolve错误。

<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

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

最后，我想在我的模板中使用以下代码：

<img src="imageA.jpg">

这将在运行开发环境中的绝对/assets/images/上转换，而在build prod上转换为相对资产/image/。

我想这是我可以在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

我想我也有同样的问题。我也使用了奥瑞莉亚·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依赖项，因为它不再被使用。

希望这能有所帮助！