Question

我还在学习webpack，但是在我的生产版本中出现图像时遇到了麻烦，直到我偶然发现了一些在.js文件顶部有require('path/to/image.png')的代码。所以我试了一下，看哪它有效。

这对我来说似乎不太好看。我是否真的必须为我需要服务的每个静态图像中包含其中一个？有一个更好的方法吗？如果没有，那将会变得混乱。

Answer 1

有$('#test').myForm(); $('#test').data('myForm') > undefined和css-loader等加载程序将网址解析为base64内联数据字符串，而不是提供静态资产。

您可以看到this great guide了解如何使用url-loader实施。如果您遇到问题，则需要确保使用正确的相对路径。

url-loader

Answer 2

在构建webpack项目时，您可以使用CopyWebpackPlugin将src文件移动到资源文件夹。

此答案中的详细信息：https://stackoverflow.com/a/33374807/492976

Answer 3

使用React，npm软件包babel-plugin-transform-react-jsx-img-import可以解析任何img元素，并且无需显式导入或需要这些图像资源。

import React from 'react';
const Image = () => {

   {* webpack configured to resolve
      the alias 'images' *}

   return (img src='images/foo.png'/>);
}

export default Image;

（Webpack）使用url-loader或文件加载器，我真的必须在我的.js中为我想要包含的每个静态图像包含一个require（）吗？

3 个答案: