Question

对于我的图片位置：WebElement Find=null; Find=driver.findElement(By.xpath("//*[@id='headerapp']/div/div/ul/li[2]/a")); if(Find!=null && Find.isDisplayed()){ Actions action=new Actions(driver); action.moveToElement(Find).build().perform(); driver.findElement(By.xpath("//*[@id='headerapp']/div/div/ul/li[2]/ul/li[1]/a")).click(); driver.manage().timeouts().implicitlyWait(15000, TimeUnit.SECONDS); } Thread.sleep(2000); WebElement mybuyers=null; try{ mybuyers=driver.findElement(By.xpath("//a[contains(., 'My Buyers')]")); if(mybuyers!=null && mybuyers.isDisplayed()){ Actions action=new Actions(driver); action.moveToElement(mybuyers).build().perform(); mybuyers.click(); driver.manage().timeouts().implicitlyWait(15000, TimeUnit.SECONDS); } }catch(Exception e){ System.out.println("My Buyers link is not displayed"); } finally{ driver.manage().timeouts().implicitlyWait(15000, TimeUnit.SECONDS); } Thread.sleep(2000); WebElement mylisting=null; try{ mylisting=driver.findElement(By.xpath("//a[contains(., 'My Listing')]")); if(mylisting!=null && mylisting.isDisplayed()){ Actions action=new Actions(driver); action.moveToElement(mylisting).build().perform(); mybuyers.click(); driver.manage().timeouts().implicitlyWait(15000, TimeUnit.SECONDS); } }catch(Exception e){ System.out.println("My Listing link is not displayed"); } finally{ driver.manage().timeouts().implicitlyWait(15000, TimeUnit.SECONDS); }

给出了关键配置：

/src/assets/bitmap/sample.jpg

context: resolve('src')

...

output: {
  path: resolve('builds/web'),
  publicPath: '',
  filename: ifProd('[name].[chunkHash].js', '[name].js')
},

我期待图像的输出结构如下所示：

loaders: [ { test: /\.(png|jpg|jpeg)/, loader: 'file-loader?name=[path][name].[ext]?[hash]' } ]

相反，我明白了：

/builds/web/assets/bitmap/sample.jpg

如何告诉文件加载器输出路径需要相对于/builds/web/src/assets/bitmap/sample.jpg而不是/src？

Answer 1

经过2天的反复试验（感谢Webpack文档！）我发现有一种方法可以控制文件加载器的输出并复制源输出目录中的目录。它是Webpack设置context，可以在每个构建器和每个构建中使用。

这是文件加载器的一个例子：

use: [{ loader: 'file-loader', options: { context: <path>, // The directory to draw relative paths from name: '[path][name].[ext]' }, },

让我们深入了解它是如何运作的。

假设我们尝试通过www.website.com/assets/images/user.png加载图片，我们项目的文件结构为：

project/ ├── src/ │ └── assets/ │ └── images/ │ └── user.png └── build/

期望的结果是：

project/ ├── src/ │ └── assets/ │ └── images/ │ └── user.png └── build/ └── assets/ └── images/ └── user.png

此配置为：

use: [{ loader: 'file-loader', options: { context: path.resolve(__dirname, 'src') name: '[path][name].[ext]' }, },

这是因为您希望复制src文件夹中build文件夹下的文件结构。

如果要从路径中删除assets目录，context的值将为：path.resolve(__dirname, 'src/assets')，文件加载器将复制从＆＃39开始的相对路径; SRC /资产＆＃39;相反，结果将是：

project/ ├── src/ │ └── assets/ │ └── images/ │ └── user.png └── build/ └── images/ └── user.png

文件加载器中出现意外的[path]

1 个答案: