Webpack：如何将 JS 文件的文件夹添加到捆绑器

Question

我有一个正在开发的 React 应用程序，我对 webpack 不太熟悉。我已经实现了一个带有一些自定义 JavaScript 的 bootstrap 主题，当我 link 在我的 index.html 主体中手动添加所有脚本时它工作正常。

hack 方法非常混乱，在缩小所有脚本时给我的控制较少。

我所有的脚本都在一个名为 vendor 的文件夹中，该文件夹位于 src。我怎样才能将 vendor 文件夹中的所有文件与其他与 webpack 捆绑在一起的东西捆绑在一起？

这是我的 webpack 文件以供参考：

const debug = process.env.NODE_ENV !== "production"
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const loaders = require('./webpack.loaders')

module.exports = {
    context: path.resolve(__dirname, "src"),
    resolve: {
        root: [ path.resolve(__dirname, "src")],
        extensions: ['', '.js', '.jsx']
    },
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/client.js",
    module: {
        loaders: loaders.concat([
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            }
        ])
    },
    output: {
        path: __dirname + "/src/",
        filename: "client.min.js"
    },
    plugins:
        debug ? [] : [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
        ]
}

Answer 1

我将展示如何导入文件夹中的所有文件。我们将使用 require 语法，尽管 import 目前更为常见。（只是不确定是否可以通过 import，也许有人可以澄清一下）。

所以：

const req = require.context('./src/vendor/', true, /.js$/);
req.keys().forEach((filename) => req(filename));

它将需要来自“./src/vendor/”的所有 JS 文件。

我认为如果您熟悉 require 语法，那么一切都清楚了。如果不是，请确保您的 JS 文件具有如下内容：

module.exports = function theme() {
  // do some stuff
  return 'some stuff';
}

你可能想像这样使用它：

const req = require.context('./src/vendor/', true, /.js$/);
req.keys().forEach((filename) => {
  const theme = req(filename);
  theme();
});

Webpack：如何将 JS 文件的文件夹添加到捆绑器

Webpack: How to add a folder of JS files to the bundler

webpack

webpack-dev-server