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 に答える