1

我有大型 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';

但是当我尝试运行开发服务器时，我得到了这些错误：

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;
4

1 回答 1

0

尝试将保存图像的文件夹 (/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')
        ]
    },
    ...
}
于 2015-12-17T15:33:31.303 回答