reactjs - 图像导入的 Node Express SSR 上的“无效或意外令牌”

Question

我将url-loader其用作我的 webpack 构建过程的一部分，并且它为我在我的 JS 文件中的任何图像文件正确移动图像文件（或创建 Base64 DataURL 字符串）import，例如：

import appleTouchIcon from '../../static/images/apple-touch-icon.png';

但是，当在 NodeJS（使用 Express）上进行服务器端渲染时，我看到以下错误：

/Users/jfender/Workspace/generetic/static/images/apple-touch-icon.png:1
(function (exports, require, module, __filename, __dirname) { �PNG
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.newLoader [as .js] (/Users/jfender/Workspace/generetic/node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

这是我的 webpack 配置：

module.exports = {
  entry: './applications/responsive/browser.js',
  output: {
    path: path.resolve(__dirname, 'static'),
    publicPath: config.get('app.assetPath'),
    filename: path.join('generated', `${appName}-responsive.js`),
    chunkFilename: path.join(
      'generated',
      'chunks',
      `${appName}-[name]-${packageJson.version}.js`
    ),
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['static/generated']),
    new MiniCssExtractPlugin({
      filename: path.join('generated', `generetic.css`),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(woff|ttf|svg)$/,
        exclude: [/images/],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'generated/fonts/',
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        exclude: [/fonts/],
        use: [
          {
            loader: 'url-loader?emitFile=false',
            options: {
              limit: 8192,
              outputPath: 'generated/images/',
            },
          },
          'image-webpack-loader',
        ],
      },
    ],
  },
};