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

有没有办法在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加载html-loader （https://github.com/webpack/html-loader）并使用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配置中完成），并且选项是禁用标记属性处理，因为你希望你的HTML5基本元素正确地添加相对url：

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

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

开头

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

希望这有帮助！

Aurelia JS webpack骨架相对资产路径

2 个答案: