Impossibile caricare file PNG con Webpack, carattere imprevisto

Question

Sto cercando di riconfigurare il mio webpack e ora non riesco a caricare i file css. Continuo la mia stili in src> stili> main.css

sto ottenendo errori come

ERROR in ./src/images/NavIcon03.png 
Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character '�' (1:0) 

Ecco la mia configurazione webpack

var webpack = require('webpack') 


module.exports = { 
    entry: [ 
    './src/main.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }, 
     { 
      test: /\.css$/, // Only .css files 
      loader: 'style!css' // Run both loaders 
     }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    contentBase: './' 
    } 
}; 

Di seguito è riportato il package.json

{ 
    "name": "website", 
    "version": "0.0.1", 
    "dependencies": { 
    "ampersand-app": "^1.0.4", 
    "ampersand-model": "^5.0.3", 
    "ampersand-react-mixin": "^0.1.3", 
    "ampersand-rest-collection": "^4.0.0", 
    "ampersand-router": "^3.0.2", 
    "asynquence": "^0.8.2", 
    "autoprefixer": "^5.2.0", 
    "autoprefixer-core": "^5.2.0", 
    "autoprefixer-stylus": "^0.7.0", 
    "axios": "^0.9.1", 
    "babel": "^5.5.8", 
    "babel-core": "^5.5.8", 
    "babel-loader": "^5.1.4", 
    "bootstrap": "^3.3.6", 
    "bootstrap-webpack": "0.0.5", 
    "css-loader": "^0.15.1", 
    "d3": "^3.5.12", 
    "file-loader": "^0.8.4", 
    "font-awesome": "^4.5.0", 
    "google-map-react": "^0.9.3", 
    "history": "^1.17.0", 
    "hjs-webpack": "^2.6.0", 
    "json-loader": "^0.5.2", 
    "local-links": "^1.4.0", 
    "lodash": "^4.3.0", 
    "lodash.assign": "^3.2.0", 
    "lodash.has": "^3.2.1", 
    "lodash.merge": "^3.3.1", 
    "lodash.pick": "^3.1.0", 
    "lodash.result": "^3.1.2", 
    "milliseconds": "^1.0.3", 
    "moment": "^2.11.1", 
    "node-libs-browser": "^0.5.2", 
    "object-assign": "^4.0.1", 
    "octicons": "^2.2.0", 
    "postcss-loader": "^0.5.0", 
    "qs": "^3.1.0", 
    "react": "^0.14.6", 
    "react-avatar-editor": "^3.2.0", 
    "react-bootstrap": "*", 
    "react-bootstrap-table": "^1.3.3", 
    "react-bootstrap-validation": "^0.1.11", 
    "react-cropper": "^0.6.0", 
    "react-d3-components": "^0.6.0", 
    "react-dom": "^0.14.6", 
    "react-dropzone": "^3.3.0", 
    "react-dropzone-component": "^0.8.1", 
    "react-facebook-login": "^2.0.3", 
    "react-fileupload": "^1.1.3", 
    "react-google-maps": "^4.7.1", 
    "react-hot-loader": "^1.3.0", 
    "react-input-slider": "^1.5.0", 
    "react-redux": "^4.4.0", 
    "react-router": "^2.0.0", 
    "react-select": "^1.0.0-beta8", 
    "react-star-rating-component": "^0.1.0", 
    "redux": "^3.3.1", 
    "redux-promise": "^0.5.1", 
    "slugger": "^1.0.0", 
    "standard": "^4.3.1", 
    "style-loader": "^0.12.3", 
    "stylus-loader": "^1.2.1", 
    "surge": "^0.14.2", 
    "url-loader": "^0.5.6", 
    "webpack": "^1.9.11", 
    "webpack-dev-server": "^1.9.0", 
    "xhr": "^2.0.2", 
    "yeticss": "^6.0.7" 
    }, 
    "license": "", 
    "private": true, 
    "scripts": { 
    "build": "webpack", 
    "deploy": "surge -p public -d labelr.surge.sh", 
    "start": "webpack-dev-server", 
    "yolo": "git add --all && git commit -am \"$(date)\" && npm version minor && git push origin master --tags && npm run build && npm run deploy" 
    }, 
    "devDependencies": { 
    "babel-preset-react": "^6.5.0", 
    "css-loader": "^0.15.6", 
    "redux-devtools": "^3.1.1", 
    "style-loader": "^0.12.4" 
    } 
} 

Answer 1

Manca un caricatore appropriato che corrisponda a quello del tuo png. Per risolvere questo problema, impostare url-loader o file-loader in modo che corrisponda al png.

url-loader ha un'opzione limite che può risultare utile. Permette di controllare se emette o meno dataurls (inline) o percorsi (usa il caricatore di file ed emette file corrispondenti ai percorsi).

Answer 2

È possibile utilizzare image-webpack-loader con il file-loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) li

$npm install image-webpack-loader file-loader --save-dev

2 installare) aggiungere alla webpack.config.js sotto babel-loader vostro nuovo set: immagine-WebPack-caricatori e di file-loader

module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
     } 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
      'file?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
     } 
    ] 
    }, 

3) importare il file .jpg nella variabile (per me i t è 'imgabout' variabile) e aggiungere questa variabile in src

import React from 'react'; 
import imgabout from './img-about.jpg'; 
export default class Article extends React.Component { 
render() { 

    const { title } = this.props; 

    return (
     <div class="col-md-6"> 
     <img class="img-about" src={imgabout} alt="Logo" /> 
     </div> 
    );}} 

Answer 3

tenta di riavviare il confezionatore che risolvere il problema per me.