Macos 如何在Electron+；React.js+；适用于Mac OS的网页包桌面应用程序包

我正在用Electron+React+Webpack模式为Mac OS构建一个桌面应用程序。 当我将Electron desktop应用程序构建为生产版本时，我希望在安装文件（Test.app和Test.dmg）中插入一些图像文件，并使用以下图像：

let Logo = process.resourcesPath + '/logo.png';

class Loading extends Component {
  render() {
    return (
        <div className={styles.container}>
          <img className={styles.logo} src={Logo} />
          ...
       </div>
      );
  }
}

---

webpack.config.production.js

---

webpack.config.electron.js

---

package.json的scripts部分

---

安装electron应用程序后，它将所有源代码和资源文件放入.asar包中。所以要插入任何图像，你必须使用应用程序外部的目录。 通常，此目录可以是文档文件夹

const { remote } = require('electron');
let tempFolder =path.join( remote.app.getPath("documents"), 'AppFiles');

---

使用tempFolder目录保存图像。

是否使用一些加载程序，例如

文件加载程序

或

url加载程序

？如果你发布你的网页配置文件，那就太好了。我将很快发布webpack ocnfig文件。我在上面发布了webpack配置文件。请尝试使用以下内容导入您的图像：

import Logo from'path/to/Logo.png'。（用文件的实际路径替换
path/to/
）。当此电子桌面应用程序以开发模式运行时，可以在Mac OS上运行“npm run dev”命令。
import path from 'path';
import webpack from 'webpack';
import validate from 'webpack-validator';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import merge from 'webpack-merge';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import BabiliPlugin from 'babili-webpack-plugin';
import baseConfig from './webpack.config.base';

export default validate(merge(baseConfig, {
  devtool: 'cheap-module-source-map',

  entry: './app/index',

  output: {
    publicPath: '../dist/'
  },

  module: {
    loaders: [
      // Extract all .global.css to style.css as is
      {
        test: /\.global\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader'
        )
      },

      // Pipe other styles through css modules and append to style.css
      {
        test: /^((?!\.global).)*\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        )
      },

      // Fonts
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?name=fonts/[hash].[ext]&limit=50000&mimetype=application/font-woff' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?name=fonts/[hash].[ext]&limit=50000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?name=fonts/[hash].[ext]' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?name=fonts/[hash].[ext]' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?name=fonts/[hash].[ext]' },

      // Images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
        loader: 'url-loader'
      }
    ]
  },

  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new BabiliPlugin({
      // Disable deadcode until https://github.com/babel/babili/issues/385 fixed
      deadcode: false,
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        screw_ie8: true,
        warnings: false
      }
    }),
    new ExtractTextPlugin('style.css', { allChunks: true }),
    new HtmlWebpackPlugin({
      filename: 'app.html',
      template: 'app/app.html',
      inject: false
    })
  ],

  target: 'electron-renderer'
}));

/**
 * Build config for electron 'Main Process' file
 */

import webpack from 'webpack';
import validate from 'webpack-validator';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import baseConfig from './webpack.config.base';

export default validate(merge(baseConfig, {
  devtool: 'source-map',

  entry: ['babel-polyfill', './main.development'],

  // 'main.js' in root
  output: {
    path: __dirname,
    filename: './main.js'
  },

  plugins: [
      deadcode: false,
    }),

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],

  target: 'electron-main',

  node: {
    __dirname: false,
    __filename: false
  }
}));

  "scripts": {
    "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js",
    "test-all": "npm run lint && npm run flow && npm run test && npm run build && npm run test-e2e",
    "test-watch": "npm test -- --watch",
    "test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js e2e",
    "lint": "eslint --cache --format=node_modules/eslint-formatter-pretty .",
    "lint-fix": "npm run lint -- --fix",
    "lint-styles": "stylelint app/*.css app/components/*.css --syntax scss",
    "hot-updates-server": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js",
    "build": "concurrently \"npm run copy-images\" \"npm run build-main\" \"npm run build-renderer\"",
    "build-dll": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.dev.dll.js --progress --profile --colors",
    "build-main": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.main.prod.js --progress --profile --colors",
    "build-renderer": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.prod.js --progress --profile --colors",
    "start": "cross-env NODE_ENV=production electron ./app/",
    "prestart": "npm run build",
    "flow": "flow",
    "flow-typed": "rm -rf flow-typed && flow-typed install --overwrite || true",
    "start-hot-renderer": "cross-env HOT=1 NODE_ENV=development electron -r babel-register -r babel-polyfill ./app/main.development",
    "postinstall": "concurrently \"npm run flow-typed\" \"npm run build-dll\" \"install-app-deps\" \"node node_modules/fbjs-scripts/node/check-dev-engines.js package.json\"",
    "dev": "cross-env START_HOT=1 npm run hot-updates-server",
    "package": "npm run build && build --publish never",
    "package-win": "npm run build && build --win --x64",
    "package-linux": "npm run build && build --linux",
    "package-all": "npm run build && build -mwl",
    "cleanup": "mop -v",
    "copy-images": "cp -Rf app/shared/images/ app/dist/images/"
  },
  "browserslist": "electron 1.4",
  "build": {
    "productName": "Test",
    "appId": "org.Test",
    "files": [
      "dist/",
      "node_modules/",
      "app.html",
      "main.js",
      "main.js.map",
      "package.json"
    ],
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "linux": {
      "target": [
        "deb",
        "AppImage"
      ]
    },
    "directories": {
      "buildResources": "resources",
      "output": "release"
    }
  },

const { remote } = require('electron');
let tempFolder =path.join( remote.app.getPath("documents"), 'AppFiles');