web-dev-qa-db-fra.com

impossible de charger des fichiers png avec webpack, caractère inattendu

Im essayant de reconfigurer mon webpack, et maintenant je ne peux pas charger les fichiers CSS. je garde mes styles dans src> styles> main.css

Je reçois des erreurs telles que

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

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

Ci-dessous est le 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"
  }
}
reactjswebpackwebpack-style-loader
29
caffeinescript

Il vous manque un chargeur approprié qui correspondrait à votre png. Pour résoudre ce problème, configurez rl-loader ou file-loader afin qu'il corresponde à votre png.

url-loader a une option de limite qui peut vous être utile. Il vous permet de contrôler s'il émet ou non des dataurls (en ligne) ou des chemins (utilise le chargeur de fichiers et émet des fichiers correspondant aux chemins).

24
Juho Vepsäläinen

Vous pouvez utiliser image-webpack-loader avec file-loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) installez-les

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

2) ajoutez à webpack.config.js ci-dessous babel-loader votre nouvel ensemble: image-webpack-loaders et 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) Importez votre fichier .jpg dans une variable (pour moi c'est la variable 'imgabout') et ajoutez cette variable dans 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> 
    );}}
9
фымышонок

Essayez de redémarrer le packager, corrigez-le pour moi.

6
Abdennacer Lachiheb