如何将 webpack 与静态图像文件一起使用？

Question

我正在使用 webpack 捆绑 .vue 文件，这些文件使用 import 和 export 。 Webpack 创建了一个不错的 bundle.js 一切都很好，很漂亮。

但是当我的 Vue 文件提到图像时，例如：

 <div>
     <img src='./images/thing.png'>
</div>

.style {
   background: url('./images/anotherthing.png');
}

现在，这张图片突然也需要放在我的 dev 文件夹中，每次我更新一个 javascript 文件中的一个字符时，webpack 都想复制我所有的图像文件。另外，并不是我所有的图片都是这样导入的，所以我必须手动复制一些文件到 dist 文件夹，webpack 也会复制一些文件……

我可以告诉 webpack 不要捆绑永远不会改变的静态图像文件吗？甚至推荐吗？

原文由 Kokodoko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Webpack 有一个 file-loader 它将处理复制静态依赖项并正确解析它们的 URL：

https://webpack.js.org/loaders/file-loader/

以下是关于图像的更深入的讨论： https ://webpack.js.org/guides/asset-management/#loading-images

原文由 VivaLaPanda 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

假设我们有以下结构： - public/ - dist/ - static/ - src/ - webpack.config.js 您可以将静态图像保存在 static 目录中，所有由 webpack 构建的文件都保存在 dist 目录中将 webpack 目录设置为 src 。 Webpack 将仅与 src 目录一起工作，您的静态文件将与 webpack 分开。

并使用 webpack watch: true 。 Webpack 将只编译更改的代码而不是所有项目。

原文由 Martin 发布，翻译遵循 CC BY-SA 3.0 许可协议