Webpackは、Web Pack.configにurl-loaderが組み込まれた後にpngをロードしていません。

Question

これは以前ここで解決したような基本的なWebパックの問題ですが、何らかの理由でWeb Packが正しくロードされているようです。

私はいくつかのソリューションを読んだことがあり、それらの多くは失敗しました。私は<img src=require('someone.png')/>のようなpngを要求してみました。イメージをインポートしようとしましたが、同じエラーが表示されます。良いことは、ファイルを見ることですが、ファイルをテキストファイルとして読み込むことです。

エラー

Module build failed: SyntaxError: Unexpected character '�' (1:0) 

1 | PNG |^ 2 | 3 | 4 | IHD; 0sRGB IDATH

Webpacksコード

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, 
     { 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
     // inline base64 URLs for <=8k images, direct URLs for the rest 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

Package.json

{ 
    "name": "moonshot", 
    "version": "1.0.0", 
    "description": "Simple starter package for Redux with React and Babel support", 
    "proxy": "http://loclhost:3090/", 
    "main": "index.js", 
    "scripts": { 
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test", 
    "test:watch": "npm run test -- --watch" 
    }, 
    "author": "Austin Scott", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.2.1", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    "chai": "^3.5.0", 
    "chai-jquery": "^2.0.0", 
    "file-loader": "^0.9.0", 
    "jquery": "^2.2.1", 
    "jsdom": "^8.1.0", 
    "mocha": "^2.4.5", 
    "react-addons-test-utils": "^0.14.7", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    }, 
    "dependencies": { 
    "axios": "^0.15.0", 
    "babel-preset-stage-1": "^6.1.18", 
    "lodash": "^3.10.1", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-redux": "^4.0.0", 
    "react-router": "^2.0.1", 
    "redux": "^3.0.4", 
    "redux-form": "^4.1.3", 
    "redux-thunk": "^2.1.0" 
    } 
} 

Answer 1

必要なモカのテストケースを実行中にエラーが上になっている場合これをあなたに追加するにはtest_helper.js

// Disable webpack-specific features for tests since 
// Mocha doesn't know what to do with them. 
['.css', '.scss', '.png', '.jpg'].forEach(ext => { 
    require.extensions[ext] =() => null; 
});