웹팩 eslint 로더 문제 경로

Question

를 해결 여기 내 웹팩 설정이다 : 나는 웹팩을 실행하면

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).