không thể tải tệp png với webpack, ký tự không mong muốn

Question

Tôi đang cố gắng định cấu hình lại gói webpack của mình và giờ tôi không thể tải tệp css. tôi giữ phong cách của tôi trong src> Kiểu> main.css

Tôi nhận được lỗi như

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

Dưới đây là cấu hình webpack tôi

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

Dưới đây là 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

Bạn đang thiếu trình tải thích hợp phù hợp với png của bạn. Để khắc phục điều này, hãy thiết lập url-loader hoặc file-loader sao cho nó khớp với png của bạn.

trình tải url có tùy chọn giới hạn mà bạn có thể thấy hữu ích. Nó cho phép bạn kiểm soát xem nó có phát ra dataurls (nội tuyến) hoặc đường dẫn hay không (sử dụng trình tải tệp và phát ra các tệp phù hợp với đường dẫn).

Answer 2

Bạn có thể sử dụng hình ảnh webpack-loader với file-loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) cài đặt chúng

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

2) thêm vào webpack.config.js dưới babel-loader mới của bạn set: image-webpack-bộ tải và tệp nạp

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) Nhập tệp .jpg của bạn vào biến (đối với tôi tôi t là biến 'imgabout') và thêm biến này vào 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

Hãy thử Khởi động lại trình đóng gói để sửa lỗi cho tôi.