如何修改 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"
    })
  ]
};

但是我在 Google 上找不到任何有用的东西。也许我的查询不够正确。请就如何实现这一点提出建议。

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

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

How to modify Webpack config to load modules from folder name

javascript

webpack

webpack-dev-server