如何为文件夹设置 webpack 2 别名？

Question

我有一个如下所示的 react 项目：

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 错误“主题”应列在项目的依赖项中。 运行“npm i -S Themes”将其添加 import/no-extraneous-dependencies
4:8 错误“模板”已定义但从未使用过
no-unused-vars 4:23 错误在“主题”之前找到多个空格 no-multi-spaces 4:23 错误绝对导入应该在前面 相对进口进口/第一
4:23 错误无法解析模块“主题”的路径
导入/未解决的 4:23 错误缺少文件扩展名 “主题”

我在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 目录都一样。