Question

我有一个movies.js文件，其中包含：

images: {
        cover: require('assets/images/cover-bigbuckbunny.png')
      },

在组件中我动态使用它。一切正常。但是，当我使用webpack进行构建时，最终看起来像这样：

和index.html是

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>SCNSmartTV</title>
  <link href="./bundle.css" rel="stylesheet" />
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

和bundle js引用了图像，然后我用浏览器在浏览器中打开html文件，控制台显示：

控制台没有显示任何错误，我看到捆绑包引用了这个哈希，它在控制台中，结果只是空方块：

据我了解，图像被查看，加载，散列，引用...为什么不显示？

webpack配置为：

var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var strip = require('strip-loader');

var root = path.resolve(__dirname, '../');

var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};

try {
  babelrcObject = JSON.parse(babelrc);
} catch (err) {
  console.error('==>     ERROR: Error parsing your .babelrc.');
  console.error(err);
}

var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};

var combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);

var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
delete babelLoaderQuery.env;

babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
var reactTransform = null;
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
  var plugin = babelLoaderQuery.plugins[i];
  if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
    reactTransform = plugin;
  }
}

var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    './app/index'
  ],
  resolve: {
    root: [
      path.resolve('./app')
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin( "bundle.css" ),
    webpackIsomorphicToolsPlugin
  ],
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: /\.png$/, loader: "url-loader?limit=10000&mimetype=image/png" },
      { test: /\.gif$/, loader: "url-loader?limit=10000&mimetype=image/gif" },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')},
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  }
}

请帮助，因为我尝试过使用配置和路线很多，但仍然没有成功并且没有想法。

顺便说一句。它可以静态工作吗？或者也许不可能在附带index.html和./bundle.js的浏览器中启动它？或者我是否需要生成必须在捆绑中的任何其他额外的mapfile？

Answer 1

Bob Sponge在评论中写道，我不得不

删除png和gif加载器，因为这类文件的处理方式 webpackIsomorphicToolsPlugin.regular_expression（＆＃39;图像＆＃39）

非常感谢Bob Sponge和asdfasdfads。

Answer 2

因为你有＆＃34;数据：图像＆＃34;在src中你可以尝试使用＆＃39; url-loader？limit = 0＆＃34;这样它就不会内联图像并改为引用文件URL。一旦你完成了那份报告。

webpack-isomorphic-tools只加载空白方块而不是图像

2 个答案: