首页 文章

使用Webpack提供静态图像

提问于
浏览
2

我在使用webpack时遇到问题,并在webpack dev服务器上提供静态图像 .

这是我的currenct文件夹结构

enter image description here

正如你所看到的,我有一个资产文件夹,它拥有我的所有图像这是我的webpack输入和输出配置

enter image description here

客户端条目是我的反应项目CLIENT_ENTRY的来源:path.join(process.cwd(),'src / client / index.jsx')

现在这是我在BASH的输出,当webpack完成它的部分
enter image description here

这里是我尝试从项目的根目录中的资源文件夹加载图像的地方

enter image description here

预计只有进口工作女巫 .

我试图在webpack路径中更改输出和公共路径:path.resolve(__ dirname,'dist'),publicPath:'/',

path:path.resolve(__ dirname,'dist / assets'),publicPath:'/ assets /',

path:path.resolve(__ dirname,'dist'),publicPath:'/ assets',

path:path.resolve(__ dirname,'dist'),publicPath:'/ assets /',

等..等..

如果有人可以帮助我那会很棒

1 回答

  • 0

    要遵循webpack背后的想法,您需要将资源从源处理到目标 .

    因此,将图像添加到源中的相对路径(本质上是您的条目),并为图像(以及可能的其他内容)添加加载器:

    { test: /\.(woff2?|jpe?g|png|gif|ico)$/, 
    use: 'file-loader?name=./assets/images/[name].[ext]' };
    

    只需更新输出到资产/图像的相对路径,它们应该能够加载 .

相关问题