Webpackが動作していないReactでの相対パスの解決

Question

私は反応プロジェクトがあり、webpackを使用しています。私はfrontend/app/components/editor/index.jsに別のコンポーネントに含めるコンポーネントがあります。現在、このコンポーネントを参照するために、相対パス（../../../../app/components/editor）を使用する必要があります。しかし、これは使い方が非常に簡単ではなく、単に「components/editor」を使いたいと思っています。私のWebpack設定ファイルはfronted/webpack.config.jsにあります。

この投稿（Resolving require paths with webpack）のように解決設定を追加しましたが、まだ動作していません。

const {resolve} = require('path'); 
const path = require('path'); 
const webpack = require('webpack'); 
const validate = require('webpack-validator'); 
const {getIfUtils, removeEmpty} = require('webpack-config-utils'); 

module.exports = env => { 
    const {ifProd, ifNotProd} = getIfUtils(env) 

    return validate({ 
    entry: './index.js', 
    context: __dirname, 
    output: { 
     path: resolve(__dirname, './build'), 
     filename: 'bundle.js', 
     publicPath: '/build/', 
     pathinfo: ifNotProd(), 
    }, 
    devtool: ifProd('source-map', 'eval'), 
    devServer: { 
     port: 8080, 
     historyApiFallback: true 
    }, 
    module: { 
     loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg)/, loader: 'file-loader'}, 
     ], 
    }, 
    resolve: {  
     root: path.resolve('./app'), 
    }, 
    plugins: removeEmpty([ 
     ifProd(new webpack.optimize.DedupePlugin()), 
     ifProd(new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
     debug: false, 
     quiet: true, 
     })), 
     ifProd(new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: '"production"', 
     }, 
     })), 
     ifProd(new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
      screw_ie8: true, // eslint-disable-line 
      warnings: false, 
     }, 
     })), 
    ]) 
    }); 
}; 

これらはすべて私が解決ブロックで試した設定ですが、何も機能しません。

resolve: {  
    alias: { 
    shared: path.resolve(__dirname, 'app') 
}, 

resolve: {  
    root: path.resolve('./app') 
}, 

resolve: {  
    modules: ['app'] 
}, 

resolve: {  
    modulesDirectories: ['app'] 
}, 

Answer 1

は実際には、そうmodules自体は、グローバルコンフィギュレーションオブジェクトのプロパティであるresolveオブジェクトのプロパティである

model.exports = env => { 
    ..., 
    resolve: { 
     modules: ['app', 'node_modules'] 
    }, 
    ... 
} 

なければなりません。また、私はnode_modulesを含んでいます。なぜなら、あなたがデフォルトを上書きした後でも、それを参照したいと思う可能性が高いからです。ちょうど[ 'node_modules' ]です。詳細についてはSee docsをご覧ください。コメント

に基づいて

更新あなたはので、作り付けのWebPACKのバリデータを維持するつもりされていない、webpack-validatorからエラーを取得しています。詳しくはSO answerとwebpack-validator npmをご覧ください。したがって、エラー[1] "modules" is not allowedは間違っています。これを修正するには、webpack-validatorを削除/アンインストールする必要があります。