如何爲文件夾設置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目錄都是一樣的。