Question

我有一个我正在开发的反应应用程序，而且我对webpack不太熟悉。我已经使用一些自定义JavaScript实现了一个bootstrap主题，当我在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));

它将需要来自＆＃39; ./ src / vendor /＆＃39;的所有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文件的文件夹添加到bundler中

1 个答案: