webentwicklung-frage-antwort-db.com.de

PNG-Dateien mit Webpack können nicht geladen werden, unerwarteter Charakter

Ich versuche mein Webpack neu zu konfigurieren, und jetzt kann ich die CSS-Dateien nicht laden. Ich behalte meine Styles in src> styles> main.css

Ich erhalte Fehler wie

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

Hier ist meine Webpack-Konfiguration

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: './'
  }
};

Unten ist die 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"
  }
}
29
caffeinescript

Ihnen fehlt ein passender Loader, der zu Ihrem PNG passt. Um dies zu beheben, richten Sie entweder RL-Ladeprogramm oder Dateiladeprogramm so ein, dass es Ihrem PNG entspricht.

url-loader hat eine Begrenzungsoption, die Sie vielleicht nützlich finden. Hiermit können Sie steuern, ob Datenaurls (Inline) oder Pfade ausgegeben werden (verwendet den Dateilader und gibt Dateien aus, die mit Pfaden übereinstimmen).

24

Sie können den image-webpack-loader mit dem file-loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/ verwenden

1) installieren sie

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

2) fügen sie zu webpack.config.js unter babel-loader ihr neues set hinzu: image-webpack-loader und 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-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      } 
    ]
  },

3) Importiere deine .jpg Datei in eine Variable (für mich ist es 'imgabout' Variable) und füge diese Variable in src ein

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> 
    );}}  
9

Versuchen Sie, den Packager neu zu starten, um ihn für mich zu reparieren.

6