如何修改Webpack配置以从文件夹名称加载模块

Question

我想只使用文件夹名称加载模块，而不在该特定文件夹中指定文件名。就像在react-starter-kit中完成的那样：

我想这需要在Webpack配置中完成，但我无法解决这个问题（我对javascript很新鲜）。

我的应用程序是以这种方式构建的，我必须引用文件夹和文件名才能导入它。

这是我当前的webpack.config.js：

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: '#cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'tether',
    'font-awesome-loader',
    'bootstrap-loader',
    './app/App',
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'app.js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react', 'stage-0']
      }
    }, {
      test: /\.css$/,
      loaders: [
        'style',
        'css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
        'postcss'
      ]
    }, {
      test: /\.scss$/,
      loaders: [
        'style',
        'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]',
        'postcss',
        'sass'
      ]
    }, {
      test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url?limit=10000"
    }, {
      test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
      loader: 'file'
    }]
  },
  postcss: [autoprefixer],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new htmlWebpackPlugin({
      title: 'MoiApp'
    }),
    new webpack.ProvidePlugin({
      "window.Tether": "tether"
    })
  ]
};

但是我在谷歌上找不到任何有用的东西。也许我的查询不够正确。请告知如何实现这一目标。

Answer 1

有不同的方法来实现这一目标。在不使用某些特殊插件的情况下，您可以通过将一个非常小的package.json文件放入文件夹中来获得此行为，其中条目main指向要在反应入门工具包中使用的文件。

{
  "name": "Header",
  "version": "0.0.0",
  "private": true,
  "main": "./Header.js"
}

另一个选项是将每个文件夹中的main重命名为index.js。有关详细信息和解决订单，请参阅以下文档：

https://webpack.github.io/docs/resolving.html

还有一个插件可帮助您避免将所有文件重命名为index.js。我没有这方面的经验：

https://www.npmjs.com/package/directory-named-webpack-plugin