如何使用 webpack 提供图像？答案

【问题标题】：How to serve images using webpack?如何使用 webpack 提供图像？
【发布时间】：2018-12-03 09:54:46
【问题描述】：

我已经阅读了很多关于这方面的资料，但我似乎仍然无法按照我想要的方式提供我的文件。

我的文件结构：

root/
  /dist/            <=  here is where webpack is putting bundles
  /public/          <=  here are where all my images are stored
  /src/             <=  here are my source files
     template.html  <= some files under src
     index.js
webpack.config.js   <=  files under root
index.html          <=  html now at root by webpack

我的 webpack.config 的 htmlWebpackPlugin 配置如下：

 new HtmlWebpackPlugin({
     "template": "./src/template.html",
     "filename": "../index.html",        <=  moved up to root?
     "hash": false,
     "inject": true,
     "compile": true,
     "favicon": false,
     "minify": false,
     "cache": true,
     "showErrors": true,
     "chunks": "all",
     "excludeChunks": [],
     "title": "Webpack App",
     "xhtml": true,
     "chunksSortMode": 'none' //fixes bug
     }),

我的输出配置如下：

output: {
    filename: '[name].[chunkhash:4].js',
    chunkFilename: '[name].[chunkhash:4].js', //name of non-entry chunk files
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/public"          <=  not really sure about this
},

因此，据我所知，publicPath 是图像元素上的“src”属性将在整个代码中提供的位置，对吗？所以，在我的代码中，我可以只输入 src='/images....' 因为 '/public' 将被添加到前面。对吧？

另外，我读到了一些关于“webpack-dev-server”的内容，也将提供该文件夹（公共）中的文件。开发服务器是否曾经查看过 webpack 创建的 dist 目录？还是完全分开的？

所以，如您所见，我将 index.html 移至根目录。不确定我是否需要这样做，但我正在尝试弄清楚如何提供我从 html 本身中调用的图像。

如何从代码“/images/....”中轻松提供文件，并直接从 html 提供文件？我应该从“公共”文件夹中提供 html，还是会影响 dist 包的服务？

【问题讨论】：

标签： html webpack webpack-dev-server

【解决方案1】：

使用 devServer 可能最简单的方式是挂载您的资产目录。webpack-dev-server 在幕后使用 express，所以：

const express = require('express');
module.exports = {
    ...
    devServer:{
        host: '0.0.0.0',
        port: 8080,
        before(app) {
            app.use('/assets/uploads', express.static(path.resolve('C:\\temp')));
        }
    }
}

我的意思是，无论如何，您可能会在生产服务器上执行类似的操作。

即。 location /assets/uploads { root /var/www/project; };在 nginx 或其他任何东西中。

另一种方法是使用 CopyWebPackPlugin：

new CopyWebpackPlugin(
  [
    {
      from: path.resolve(__dirname, 'public'), 
      to: path.resolve(__dirname, 'dist'),
      ignore: [ 'index.html', ... ]
    }
  ]
),

另一种方法是将您的图像添加到您条目中某处的代码require('image1.jpg'); 并添加一个文件加载器并让 webpack 处理其余部分。 Webpack 非常灵活。如果您对文件夹结构感到疑惑，请暂时禁用 webpack-dev-server，以便查看实际输出。

抱歉，我刚刚意识到我回答了您的标题问题而忽略了其他所有内容。

【讨论】：

【解决方案2】：

因此，据我所知，publicPath 是“src”属性所在的位置图像元素将在整个代码中提供，对吗？所以，在我的代码中，我可以只输入 src='/images....' 因为 '/public' 将是前置。对吧？

不，publicPath 是您服务器上的静态文件（生产构建）的来源，而 webpack 将需要使用该前缀的所有其他块。

另外，我读过一些关于“webpack-dev-server”将提供文件的信息也来自该文件夹（公共）。开发服务器是否曾经查看过 webpack 创建的 dist 目录？还是完全分开的？

webpack-dev-server 从内存服务器文件，所有文件编译。

所以，如您所见，我将 index.html 移至根目录。不知道我需要这样做，但我正试图弄清楚如何为我的我从 html 本身中调用的图像。

不需要。

如何从代码“/images/....”中轻松提供文件并直接从 html 为它们提供服务？我应该提供 html 来自“公共”文件夹，否则会影响 dist 的服务捆绑？

您导入您的图像，例如：import MyImage from './cat-image.png。

并把 src attr 放在 img 标签中。 <img src={MyImage} />

Webpack 将看到导入（您必须在 webpack 配置文件上安装和配置文件加载器）并将解析它。所有这些解析的图像都将输出到目标文件夹（dist 或您在输出中配置的任何内容）。

【讨论】：