1

私は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>

バンドル 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 が添付されたブラウザでこれを起動することは不可能でしょうか? または、バンドルに含める必要がある他の追加のマップファイルを生成する必要がありますか?

4

2 に答える 2

0

src に "data:image" があるので、'url-loader?limit=0" を使用して、画像をインライン化せず、代わりにファイルの URL を参照することを試みることができます。

于 2016-04-24T09:23:40.870 に答える