Webpack 反应。配置图片文件夹

Question

请帮助配置文件加载器，以便在 such a structure

的项目中

我可以用类似的方式从 public 文件夹中获取图像：

<img src={"/images/globalx_logo.svg"} className="globalx-logo"/>

为了做点什么，我写了这个 webpack.config.js:

var path = require('path')

module.exports = {
   entry: "./src/index.js",
   output: {
      path: path.resolve(__dirname, './output'),
      publicPath: '/output/',
      filename: 'bundle.js'
   },
   devServer: {
      historyApiFallback: true,
   },
   module: {
      rules: [
         {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel-loader",
            options: {
               presets: ["@babel/preset-env", "@babel/preset-react"]
            }
         },
         {
            test: /\.s[ac]ss$/i,
            use: [
               'style-loader',
               'css-loader',
               'sass-loader'
            ]
         },
         {
            test: /\.(jpg|png|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                publicPath: './public/',
                outputPath: './output/public/'
            }
         }
      ]
   }
}

Answer 1

你可以像这样使用加载器

 {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1000000,
              fallback: 'file-loader',
              name: 'images/[name].[hash].[ext]',
            }
          }
        ]
      }

并使用导入

import logo from '/images/globalx_logo.svg'

 <img src={logo} className="globalx-logo"/>

Webpack 反应。配置图片文件夹

Webpack react. Configure a folder with pictures

javascript

public-folders

reactjs

webpack