首页 文章

Aurelia JS webpack骨架相对资产路径

提问于
浏览 次
1

我有一个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' } 
] }
javascript webpack aurelia

2 回答

  • 0

    我用 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' },
     ...
   ]
}
    回复于
  • 0

    我想我有同样的问题 . 我还使用了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 依赖项，因为它已不再使用 .

    希望这可以帮助！

    回复于

相关问题