webpack，子文件夹中的文件较少，一个文件夹中的图像较少

Question

我有很大的AngularJS，我试着从Grunt迁移到webpack。我不能改变项目的结构，但在目前的结构下，我坚持从较少的文件中加载图像的问题。我认为我应该将图像路径从相对路径替换为绝对路径，因为webpack尝试从子文件夹(样式/组件)中加载图像，这些子文件夹中的文件较少。

这是我的webpack配置：

   config.output = {
      path: __dirname + '/app',

      publicPath: 'http://localhost:8080/'
   };
config.module.loaders.push({
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
  loader: 'file?name=[path][name].[ext]'
});
var cssLoader = {
    test: /\.less/,

    loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!less-loader')
  };

config.module.loaders.push(cssLoader);

config.plugins = [
    new ExtractTextPlugin('[name].[hash].css')
  ];

在入口文件(app/scripts/bootstrap.js)中，我有：

import './../styles/style.less';

但是当我尝试运行dev server时，我得到了以下错误：

ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/less-loader!./app/styles/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/arrow-up-gray.png in /Users/nucleartux/Work/projects/ondoc-angular/app/styles
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/less-loader!./app/styles/style.less 7:174762-174796

ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/less-loader!./app/styles/style.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/fonts/GothamPro-Medium.eot in /Users/nucleartux/Work/projects/ondoc-angular/app/styles
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/less-loader!./app/styles/style.less 7:176400-176450

如何在不重写所有较少文件的情况下修复错误？

我的项目结构

​

​

与app/styles/components/commom.less中的样式不同

background: url(../img/arrow-down-gray.png) no-repeat;

Answer 1

尝试将保存图像的文件夹(/img/arrow-up-gray.png)添加到resolve.root中：

https://webpack.github.io/docs/configuration.html#resolve-root

我实际做的是：

var path = require('path');

module.exports = {
    ...
    resolve: {
        root: [
            path.resolve('./static')
        ]
    },
    ...
}