не удается загрузить файлы png с помощью веб-пакета, неожиданный символ

Я пытаюсь перенастроить свой веб-пакет, и теперь я не могу загрузить файлы css. я храню свои стили в src> стили> main.css

Я получаю ошибки, такие как

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

Вот моя конфигурация веб-пакета

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

Ниже приведен 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"
  }
}

webpack reactjs webpack-style-loader
person caffeinescript    schedule 23.02.2016    source источник

Ответы (4)


arrow_upward
30
arrow_downward

Вам не хватает подходящего загрузчика, который соответствовал бы вашему png. Чтобы это исправить, настройте либо url-loader, либо file-loader, чтобы он соответствовал вашему png.

url-loader имеет параметр ограничения, который может оказаться полезным. Он позволяет вам контролировать, выдает ли он URL-адреса данных (встроенные) или пути (использует file-loader и выдает файлы, соответствующие путям).

person Juho Vepsäläinen    schedule 23.02.2016
comment
Я использую url-loader { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192', }, но у меня та же ошибка, я думаю, это проблема с бабелем-загрузчиком - person Sibelius Seraphini; 29.07.2016
comment
Мне нужен простой проект для запуска, чтобы сказать лучше. - person Juho Vepsäläinen; 29.07.2016
comment
Я использую этот шаблон: github.com/kitconcept/webpack-starter-angular - person Sibelius Seraphini; 29.07.2016
comment
@SibeliusSeraphini Можете ли вы связать меня с версией того, что сразу выходит из строя? Мне нужно понять, что вы делаете именно так, как я не хочу гадать. Шаблон не содержит изображений. :) - person Juho Vepsäläinen; 30.07.2016
comment
вот пример с изображением: github.com/Lar21/webpack-starter-angular/blob/master/src/, у меня на этом изображении 404, извините за задержку с ответом - person Sibelius Seraphini; 01.08.2016
comment
Я исправил свою проблему, используя следующий подход: github.com/petehunt /webpack-howto/issues/ - person Sibelius Seraphini; 02.08.2016

arrow_upward
12
arrow_downward

Вы можете использовать image-webpack-loader с файловым загрузчиком https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) установить их

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

2) добавьте в webpack.config.js ниже babel-loader ваш новый набор: image-webpack-loaders и 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) Импортируйте файл .jpg в переменную (для меня это переменная imgabout) и добавьте эту переменную в 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> 
    );}}
person фымышонок    schedule 29.03.2017

arrow_upward
8
arrow_downward

Попробуйте перезапустить упаковщик, он исправит это для меня.

person Abdennacer Lachiheb    schedule 10.04.2017

arrow_upward
1
arrow_downward

Просто обновление, я получил предупреждения, используя эту настройку для webpack.config.js

Итак, чтобы решить предупреждения, я должен изменить это:

{
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              query: {
                name:'assets/[name].[ext]'
              }
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              query: {
                mozjpeg: {
                  progressive: true,
                },
                gifsicle: {
                  interlaced: true,
                },
                optipng: {
                  optimizationLevel: 7,
                }
              }
            }
          }]
      }
person Raul Barboza    schedule 11.03.2020
comment
мне нужно создать файл webpack.config.js в моем корне проекта? и я думаю, что мне нужно добавить exports.module к этому коду, верно? - person Eric. M; 05.05.2021