webpack2'无法在'project'中解析assets / img / coin.png'

Question

我正在尝试使用require语句动态导入图像，但在此之前，像这样的常规导入不起作用：

import 'assets/img/coin.png'

实际用例是：

require(资产/ IMG / $ {源}。$ {EXT} / );

来自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;

Answer 1

从错误日志中可以看出，webpack正在尝试从/Img文件夹中解析您的图像需求。

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

您的webpack配置告诉Webpack解决尝试以下路径的需求路径（按顺序）：

• node_modules
• app
• 执行必需的文件夹

由于无法在assets/img/coin.png和node_modules目录中解析路径app，因此Webpack尝试从上一个回退目录解析并转换not found错误从那里。

coin.png中有app/assets/img/吗？

Answer 2

你需要上升两个目录。而不是assets/img/coin.png，导入../../assets/img/coin.png。

Answer 3

事实证明，Sketch.app在文件名之前用空格导出文件。