Fatal编程技术网
  • webpack/
  • Webpack 网页包同构工具仅加载空白方块，而不加载图像

Webpack 网页包同构工具仅加载空白方块，而不加载图像

webpack

Webpack 网页包同构工具仅加载空白方块，而不加载图像,webpack,webpack-isomorphic-tools,Webpack,Webpack Isomorphic Tools,我有一个movies.js文件，它有： images: { cover: require('assets/images/cover-bigbuckbunny.png') }, 在组件中，我动态地使用它。一切正常。 但是当我用webpack构建一个最终看起来像这样的东西时： 而index.html是 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

我有一个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>


SCNSmartTV
bundle js引用了图片，我用编辑器在浏览器中打开html文件，控制台显示：

控制台没有显示任何错误，我看到bundle引用了控制台中的这个散列，结果只是一个空白方块：

据我所知，图像被查看、加载、散列、引用。。。为什么不显示

网页包配置为：

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' }
    ]
  }
}

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条带=需要（“条带装载机”）；
var root=path.resolve（_dirname，“../”）；
var babelrc=fs.readFileSync（'./.babelrc'）；
var babelrcObject={}；
试一试{
babelrcObject=JSON.parse（babelrc）；
}捕捉（错误）{
console.error（'=>error:error解析您的.babelrc'）；
控制台错误（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}）；
删除babelLoaderQuery.env；
babelLoaderQuery.plugins=babelLoaderQuery.plugins | |[]；
var=null；
对于（var i=0；i
请帮帮我，因为我试过很多次使用配置和路由，但仍然没有成功，也没有什么想法

顺便问一下，它能静态工作吗？或者可能无法在附加了index.html和./bundle.js的浏览器中启动此功能？或者我是否需要生成任何其他必须在捆绑包中的额外映射文件？

由于src中有“data:image”，您可以尝试使用“url loader？limit=0”，这样它就不会内联图像，而是引用文件url。一旦您完成了该报告。

正如Bob Sprone在评论中所写，我必须这样做

删除png和gif加载程序，因为此类型的文件由 WebpackIsomorphicToolsLugin.regular_表达式（'图像'）

非常感谢您，Bob Spoone和asdfasdfads。

您可以尝试删除png和gif加载程序，因为这种类型的文件由
WebpackIsomorphicToolsLugin.regular\u表达式（“图像”）处理
非常感谢你，鲍勃·斯波尼。这正是我的网页的错误所在。亲爱的asdfasdfads，非常感谢你。我使用网页同构工具而不从加载程序中删除这一行是一件愚蠢的事情：{test://\.png$/，加载程序：“url加载程序？limit=10000&mimetype=image/png”}。