webpack2 «Не удается разрешить assets/img/coin.png» в «проекте»

Я пытаюсь динамически импортировать изображение с помощью оператора require, но даже до этого обычный импорт не работает:

import 'assets/img/coin.png'

Фактический вариант использования:

require(assets/img/${источник}.${расширение}/);

ошибки из import

ERROR in ./app/components/Img/index.js
Module not found: Error: Can't resolve 'assets/img/coin.png' in '/Users/rublev/dev/company/support/app/components/Img'
 @ ./app/components/Img/index.js 36:0-33
 @ ./app/components/SectionList/index.js
 @ ./app/pages/Support/index.js
 @ ./app/views.js
 @ ./app/app.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./app/app.js

структура каталога

.
├── app
│   ├── app.js
│   ├── assets
│   │   ├── img        <- where i want to import images from
│   ├── components
│   │   ├── Footer
│   │   ├── Img        <- component im importing images into
│   │   ├── List
│   │   ├── Loader
│   │   ├── Nav
│   │   ├── Searchbar
│   │   ├── SectionList
│   │   └── Vote
│   ├── containers
│   │   └── App
│   ├── index.html
│   ├── pages
│   │   ├── Article
│   │   ├── Section
│   │   └── Support
│   ├── reducers.js
│   ├── router.js
│   ├── store.js
│   └── views.js
├── config
│   ├── webpack.config.base.babel.js
│   ├── webpack.config.development.babel.js
│   └── webpack.config.production.babel.js
├── package.json
└── yarn.lock

webpack.config.base.babel.js

import webpack, { IgnorePlugin } from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { resolve, join } from 'path';

// dotenv
const Dotenv = require('dotenv-webpack');

const NODE_ENV = process.env.NODE_ENV;

const env = {
    production: NODE_ENV === 'production',
    staging: NODE_ENV === 'staging',
    test: NODE_ENV === 'test',
    development: NODE_ENV === 'development' || typeof NODE_ENV === 'undefined'
};

Object.assign(env, {
    build: (env.production || env.staging)
});

export default {
    output: {
        path: join(process.cwd(), '/dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
        modules: [
            'node_modules',
            'app',
            join(__dirname, '')
        ],
        extensions: ['.html', '.json', '.scss', '.js', '.jsx'],
        alias: {
            normalize: join(process.cwd(), '/node_modules/normalize-css/normalize.css')
        }
    },
    module: {
        noParse: /\.min\.js/,
        rules: [
            {
                test: /\.json($|\?)/,
                use: 'json-loader',
                enforce: 'pre'
            },
            {
                test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
                use: 'url-loader?prefix=font/&limit=10000'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: 'file-loader',
                options: {
                    context: '/',
                    name: '[name].[ext]'
                },
            }
        ]
    },
    plugins: ([
        new HtmlWebpackPlugin({
            title: 'company',
            template: join(process.cwd(), '/app/index.html')
        }),
        new Dotenv(),
        new webpack.DefinePlugin({
            __DEV__: env.development,
            __STAGING__: env.staging,
            __PRODUCTION__: env.production,
            __CURRENT_ENV__: '\'' + (NODE_ENV) + '\''
        })
    ]),
    devServer: {}
};

webpack.config.development.babel.js

import webpack, { IgnorePlugin } from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { resolve, join } from 'path';

import config from './webpack.config.base.babel.js';

if (process.env.NODE_ENV !== 'test') {
    config.entry = [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        join(process.cwd(), '/app/') + 'app.js'
    ];
}

config.devtool = '#source-map';

config.module.rules = config.module.rules.concat([
    {
        enforce: 'pre',
        test: /\.jsx?$/,
        exclude: resolve(__dirname, 'app', 'node_modules'),
        use: 'source-map-loader'
    },
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.css?$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    },
    {
        test: /\.(sass|scss)$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    }
]);

config.devServer = {
    contentBase: './dist',
    host: '0.0.0.0',
    port: 8080,
    stats: {
        version: false,
        chunks: false,
        assets: true,
        colors: true,
        children: true
    }
};

export default config;

person eveo    schedule 02.05.2017    source источник
comment
Я бы попробовал использовать косую черту в начале и/или установить конфигурацию resolve.modules, хотя теоретически в этом нет необходимости.   -  person mikeapr4    schedule 02.05.2017
comment
Каково ожидаемое значение ${source} и ${ext}во время выполнения?   -  person Andrea Carraro    schedule 03.05.2017


Ответы (3)


Из вашего журнала ошибок видно, что веб-пакет пытается разрешить ваше изображение, требуемое из папки /Img.

Module not found: Error: Can't resolve 'assets/img/coin.png' in '/Users/rublev/dev/company/support/app/components/Img'

Конфигурация вашего веб-пакета указывает Webpack разрешить требуемые пути, пробуя следующие пути (по порядку):

  • node_modules
  • app
  • Папка, где выполняется требуемое

Поскольку путь assets/img/coin.png не мог быть разрешен ни в каталоге node_modules, ни в каталоге app, Webpack попытался разрешить его из последнего запасного каталога и оттуда выдал ошибку not found.

Доступен ли coin.png в app/assets/img/?

person Andrea Carraro    schedule 03.05.2017
comment
Да, coin.png тут как тут. Я ls просматривал каталог много раз, чтобы не споткнуться. Он отлично открывается в моем редакторе, Preview, Photoshop и т. Д. Я предпочел сделать это приложение только текстовым, полностью устранив эту проблему. - person eveo; 03.05.2017

Вам нужно подняться на два уровня выше. Вместо assets/img/coin.png импортируйте ../../assets/img/coin.png.

person Kyle Richardson    schedule 02.05.2017

Оказывается, Sketch.app экспортировал файлы с пробелом перед именем файла.

person eveo    schedule 03.05.2017
comment
Отлично! Это был именно вывод моего ответа. Вы хотите пометить его как принятый? Это S.O., в конце концов :) - person Andrea Carraro; 03.05.2017