Question

我正在尝试创建一个通用的反应应用程序（在服务器和客户端上都使用webpack）并且难以使用图像导入。我想写这个：

import someImage from './someImage.png'

const SomeImage = () => <img src={someImage}/>

这是我的webpack配置文件：

var path              = require('path');
var webpack           = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry:  [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './client',
    'babel-polyfill'
  ],
  output: {
    path:     path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions:         ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },
      {
        test: /\.css/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file?emitFile=false',
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    proxy: {
      '*': 'http://127.0.0.1:' + (process.env.PORT || 3000)
    },
    host: '127.0.0.1'
  }
};

显然它不在服务器端，因为node尝试读取./someImage.png文件的内容，导致错误。

我该如何处理？我知道有webpack-isomorphic-tools或universal-webpack之类的软件包，甚至文件加载程序包都可以发出或不发送文件，但我不明白在我的通用应用程序中使用它。

Answer 1

我将文件加载器与emitFile：false结合使用，以将资产从服务器端的捆绑中排除。按预期工作。

    module: {
      rules: [
        {
          test: /\.(png|jpeg|gif|ico|ttf|css)$/,
          use: [
            {
              loader: "file-loader",
              options: { emitFile: false },
            },
          ],
        }
      ],
    },

如何使用webpack服务器端处理静态资产？

1 个答案: