Question

我希望你能帮助我当我运行webpack时，我的应用程序会被构建到dist文件夹中
不幸的是， img 文件夹无法复制，因此我最终得到的是没有图片的应用。通过webpack实现这一目标的正确方法是什么，或者哪里是一个好的起点？我已经看了一下webpack文档，但我不确定在哪里看。

下面的webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const sass = require('node-sass');
const path = require('path');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test:/\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets:['env','react']
          }
        }
      },
      {
        test: /\.scss$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
      }
    ],
    loaders: [
     { test: /\.json$/, loader: 'json' }
     // other loaders
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

非常感谢任何帮助谢谢你萌

Answer 1

您应该使用file-loader来使用webpack加载图像文件。只需通过npm安装它并将其添加到装载机中就可以了。您可以找到有关此in the webpack documentation的更多信息。

祝你好运

如果以这种方式将图像放在页面上并不困难，请尝试将它们的路径插入到data.json中，然后使用某些const中的map方法在页面上显示它们

Answer 2

在您的webpack配置文件中，在加载器规则中使用url-loader。在您的规则中添加一个用于加载图像的规则：

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
     } ]
 }

同时安装url-loader npm包。

安装它：

npm install url-loader --save-dev

它将安装url加载程序，它可以将已解析的图像路径转换为BASE64字符串。如果文件大小小于 8192字节，则会返回图片网址，否则如果文件大小超过限制，则文件将直接通过file-loader使用。您可能需要安装文件加载器也是如此。

安装它：

npm install file-loader --save-dev

Answer 3

如果将图像文件夹放置在试剂应用程序的“公共”文件夹中，则可以使用拨号盘完成图像使用，稍后在应用程序开发过程中由应用程序调用该图像。原因是当您开始使用npm start命令时，公用文件夹位于本地主机3000的端口上。

如何在我的React App中包含我的图像文件夹结构？

3 个答案: