Question

我已经读了很多东西，但是我似乎仍然无法按照自己想要的方式来提供文件。

我的文件结构：

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
},

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

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

因此，如您所见，我将index.html移到了根目录。不知道是否需要这样做，但是我试图弄清楚如何在html本身中提供要调用的图像。

如何从代码“ / images / ....”内轻松提供文件，也可以直接从html提供文件？我应该从“ public”文件夹中投放html还是会影响dist捆绑包的投放？

Answer 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，以便可以看到实际的输出。

对不起，我才意识到我回答了您的标题问题，却忽略了其他所有内容。

Answer 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。

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

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

如何使用webpack投放图片？

2 个答案: