javascript 如何将 webpack 与静态图像文件一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48233510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use webpack with static image files?
提问by Kokodoko
I am using webpack to bundle .vue files, which use importand export. Webpack creates a nice bundle.jsand that's all fine and dandy.
我正在使用 webpack 捆绑 .vue 文件，这些文件使用import和export. Webpack 创建了一个很好的bundle.js，这一切都很好。
BUT when my Vue file mentions an image, for example:
但是当我的 Vue 文件提到一个图像时，例如：
<div>
<img src='./images/thing.png'>
</div>
.style {
background: url('./images/anotherthing.png');
}
Now, suddenly this image needs to be in my dev folder as well, and webpack wants to copy ALL my image files each and every time I update one character in one javascript file. Also, not ALL my images are imported this way, so I have to copy some files manually to the dist folder, and webpack also copies some files...
现在，突然这个图像也需要在我的 dev 文件夹中，每次我更新一个 javascript 文件中的一个字符时，webpack 都想复制我所有的图像文件。此外，并非我所有的图像都是以这种方式导入的，所以我必须手动将一些文件复制到 dist 文件夹中，而 webpack 也会复制一些文件...
Can I tell webpack not to bundle static image files that never change? Is that even recommended?
我可以告诉 webpack 不要捆绑永远不会改变的静态图像文件吗？这甚至是推荐的吗？
采纳答案by Adrian Smith
Webpack has a file-loaderwhich will handle copying static dependencies and resolving their URLs correctly:
Webpack 有一个file-loader可以处理复制静态依赖项并正确解析它们的 URL：
https://webpack.js.org/loaders/file-loader/
https://webpack.js.org/loaders/file-loader/
Here is more in depth discussion about images specifically: https://webpack.js.org/guides/asset-management/#loading-images
以下是关于图像的更深入讨论：https: //webpack.js.org/guides/asset-management/#loading-images
回答by Martin
Let's say we have following structure:
- public/
- dist/
- static/
- src/
- webpack.config.js
You can keep your static images in staticdirectory and all files built by webpack in distdirectory. Set webpack directory to src. Webpack will work with only srcdirectory and your static files will be separated from webpack.
假设我们有以下结构：
- public/
- dist/
- static/
- src/
- webpack.config.js
您可以将静态图像保存在static目录中，并将 webpack 构建的所有文件保存在dist目录中。将 webpack 目录设置为src. Webpack 仅适用于src目录，您的静态文件将与 webpack 分开。
And use webpack watch: true. Webpack will compile only changed code not all project.
并使用 webpack watch: true。Webpack 只会编译更改过的代码，而不是所有项目。
回答by sidhuko
You can use a different file extension to handle certain images differently. Be sure to include the ignore-loaderbefore the file-loader:
您可以使用不同的文件扩展名以不同的方式处理某些图像。确保在文件加载器之前包含忽略加载器：
{ test: /ignore\.(png|jpg|gif|svg)$/, loader: 'ignore-loader' },
{ test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }
Then include your image using the prefixed extension:
然后使用带前缀的扩展名包含您的图像：
<img src='./images/thing.ignore.png'>
You'll need to rename the file to thing.ignore.png as well.
您还需要将文件重命名为 thing.ignore.png。
