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服务器时，我遇到了这些错误：

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')
        ]
    },
    ...
}