Webpack eslint-loader Probleme bei der Auflösung von Pfaden

Question

Hier ist mein webpack config:

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]' 
     } 
    ] 
    } 
}; 

Wenn ich webpack laufen, bekomme ich diesen Fehler:

Unable to resolve path to module 'button'

Als ich dies ausführen, ohne den eslint preloader, es funktioniert gut. Es scheint, dass ein Problem mit dem Eslint-Loader besteht und Pfade mit resolve aufgelöst werden. Gibt es eine Möglichkeit, dieses Problem zu umgehen?

Answer 1

Ok, also die Antwort war, eslint-import-resolver-webpack-Modul zu verwenden und diese zu meiner .eslintrc hinzuzufügen.

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" } 
    } 
    }, 
    ... 
}; 

Jedoch passen Sie die folgenden Einschränkungen: 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).