如何从捆绑的应用程序中获取图像

Question

我有一个带有此脚本的 webpack 捆绑应用程序。此脚本还可以导出文件。

我从另一个应用导入这个应用。捆绑的应用程序在 paretn 应用程序中运行良好，但我找不到如何在父应用程序中显示和使用此导出的图像。它们没有显示。我的猜测是 webpack 不会将图像视为模块。

module.exports = {
  devtool: 'source-map',
  entry: './src/App.js',
  
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  },

  plugins: commonConfig.plugins.concat([
    new webpack.optimize.OccurrenceOrderPlugin()
  ]),

  resolve: commonConfig.resolve,

  module: {
    rules: commonConfig.module.rules.concat({
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss-loader',
        'less-loader'
      ]
    })
  },

  externals: {
    'react': 'commonjs react'
  }
};

Answer 1

我目前找到的解决方案是包含图像（小型 svg 和 png 文件）以与此类配置捆绑在一起。它可能是代码拆分的更好解决方案。

  {
    test: /.*\.(svg)$/i,
    include: path.resolve(mainPath, 'ui/svg/inline'),
    use: "svg-inline-loader"
  },
  {
    test: /.*\.(svg)$/i,
    include: path.resolve(mainPath, 'ui/svg/default'),
    use: {
      loader: "url-loader",
      options: {
        limit: 100000
      }
    }
  },

如何从捆绑的应用程序中获取图像

How to get Images from bundled app

reactjs

webpack

commonjs