フォルダのwebpack 2エイリアスを設定するにはどうすればよいですか？

Question

は

、私は次のような反応するプロジェクトがあります。

app 
|_ components 
|_ containers 
|_ actions 
|_ reducers 
|_ themes 
     |_ theme1 
      |_ index.jsx 
     |_ theme2 
      |_ index.jsx 

package.json 
webpack.config.js 

を私の質問は：

は私がテーマフォルダ内の任意のファイルを呼び出すことができますエイリアスを設定する方法はありますか？

私はWebPACKの2を使用していると私はこのような代が見つかりました：

resolve: { 
    extensions: ['*', '.js', '.jsx'], 
    alias: { 
     Themes$: path.resolve(__dirname, 'src/themes/') 
    } 
    }, 

私はまた次のようにこれらのファイルをインポートしたい：私は実行すると

import * as Themes from 'Themes';

私のプロジェクトでは、次のエラーが表示されます。

4:1 error 'Themes' should be listed in the project's dependencies. Run 'npm i -S Themes' to add it import/no-extraneous-dependencies
4:8 error 'Template' is defined but never used
no-unused-vars 4:23 error Multiple spaces found before ''Themes'' no-multi-spaces 4:23 error Absolute imports should come before relative imports import/first
4:23 error Unable to resolve path to module 'Themes'
import/no-unresolved 4:23 error Missing file extension for "Themes"

this documentationにいくつかの例がありますが、実装する正しい方法を理解できません。私のwebpack設定を正しい方法でどのように設定することができますか？以下は

私webpack.config.jsです：

var path = require('path'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 

module.exports = { 
    entry: ['babel-polyfill', './src/js/index.jsx'], 

    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 

    module: { 
    rules: [ 
     { 
     enforce: "pre", 
     test: /\.jsx$/, 
     exclude: /node_modules/, 
     loader: "eslint-loader", 
     }, 
     { 
     test: /\.jsx?$/, 
     exclude: [/node_modules/], 
     use: [{ 
      loader: 'babel-loader', 
      options: { presets: ['es2015', 'react', 'stage-0'] } 
     }] 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      { loader: 'style-loader' }, 
      { loader: 'css-loader'} 
     ] 
     }, 
     { 
     test: /\.less$/, 
     use: [ 
      { loader: 'style-loader' }, 
      { loader: 'css-loader'}, 
      { loader: 'less-loader' }, 
     ] 
     }, 
     { 
     test: /\.(jpg|jpeg|png|gif|svg)$/i, 
     use: { 
      loader: 'url?limit=10000!img?progressive=true' 
     } 
     }, 
     { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' } 
    ] 
    }, 

    resolveLoader: { moduleExtensions: ["-loader"] }, 

    devtool: 'source-map', 

    resolve: { 
    extensions: ['*', '.js', '.jsx'], 
    alias: { 
     Themes$: path.resolve(__dirname, 'src/themes/') 
    } 
    }, 

    plugins: [ 
    new CopyWebpackPlugin([ 
     { from: './src/html' }, 
     { from: './src/img/favicon.ico', to: './img'} 
    ]) 
    ], 

    devServer: { 
    inline: true, 
    hot: true, 
    contentBase: path.join(__dirname, 'dist'), 
    port: 5000 
    } 
} 

Answer 1

ここのように見えるの別名で、バリアントの設定を変更してください：

resolve: { 
    extensions: ['*', '.js', '.jsx'], 
    alias: { 
     Themes: path.resolve(__dirname, 'src/themes/') 
    } 
    }, 

が続いthemesディレクトリindex.js（に追加パス：app/themes/index.js）：

import * as theme1 from './theme1'; 
import * as theme2 from './theme2'; 

export default { 
    theme1, 
    theme2 
} 

ファイル：app/themes/theme1/index.jsxは、theme1ディレクトリ内のすべてのスタッフのオブジェクトをエクスポートする必要があります。

import Someting from './Someting'; 
import Anything from './Anything'; 

export default { 
    Someting, 
    Anything 
} 

今、あなたは試すことができます：

import * as MyThemes from 'Themes'; 
console.log(MyThemes.theme1.Someting); 
console.log(MyThemes.theme1.Anything); 

または

import MyFirstTheme from 'Themes/theme1'; 
console.log(MyFirstTheme.Someting); 
console.log(MyFirstTheme.Anything); 

をtheme2ディレクトリのすべてのと同じ。