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

Question

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

我想这需要在 Webpack 配置中完成，但我还不能解决这个问题（我对 javascript 很陌生）。

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

这是我当前的 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指向要使用的文件，就像在 React 入门工具包中所做的那样。

{
  "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