のWebPACK eslint・ローダーの問題パス

Question

の解決ここに私のWebPACKの設定です：私はWebPACKのを実行すると

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var autoprefixer = require('autoprefixer'); 

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './playground/reactLib/playground.jsx' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 

    eslint: { 
    configFile: 'lint/.eslintrc.js' 
    }, 
    resolve: { 
    root: path.resolve(__dirname), 
    alias: { 
     'button': 'aframe/components/buttons/Button.jsx', 
    } 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'eslint-loader', 
     include: [path.join(__dirname, 'playground'), path.join(__dirname, 'aframe')], 
     exclude: /node_modules/ 
     } 
    ], 
    loaders: [ 
     { test: /\.less$/, loader: "style!css!less",include: __dirname }, 
     { test: /\.css$/, loader: "style!css" }, 
     { 
     test: /.jsx?$/, 
     loaders: ['react-hot'], 
     include: __dirname, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     include: __dirname, 
     exclude: /node_modules/, 
     query: { 
      plugins: ['transform-object-rest-spread'], 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file?name=static/fonts/[name].[ext]' 
     }, 
     { 
     test: /\.png$/, 
     loader: 'file?name=static/[name].[ext]' 
     } 
    ] 
    } 
}; 

、私はこのエラーを取得する：

Unable to resolve path to module 'button'

私はeslintプリローダーなしでこれを実行する

、それ正常に動作します。 eslintローダーに問題があり、resolveを使ってパスを解決しているようです。この問題を回避する方法はありますか？

Answer 1

答えたので、答えはeslint-import-resolver-webpackモジュールを使用してこれを私の.eslintrcに追加することでした。

module.exports = { 
    ... 
    // These settings are needed for eslint to play well with webpack resolve 
    "settings": { 
    "import/parser": "babel-eslint", 
    "import/resolver": { 
     "webpack": { "config": "webpack.config.js" } 
    } 
    }, 
    ... 
}; 

ただし、以下の制限に注意： https://libraries.io/npm/eslint-import-resolver-webpack

However, Webpack allows a number of things in import module source strings that Node does not, such as loaders (import 'file!./whatever') and a number of aliasing schemes, such as externals: mapping a module id to a global name at runtime (allowing some modules to be included more traditionally via script tags).