Webpack 将目录中的所有文件连接到单个文件的网页包配置

我正在尝试从brunch.io切换到webpack，我希望保持当前布局如下：

• index.html
• app.js（连接app/dir中的所有文件）
• vendor.js（连接dep/dir中的所有文件）

到目前为止，我成功地使用了

index.html

和

app.js

文件，但我无法将

dep/

文件夹中的文件连接到

vendor.js

这是我的webpack.config文件：

  var webpack, compileDir, jsEntryPoint, jadeEntryPoint;
  require("shelljs/global");
  webpack = require('webpack');
  compileDir = "./build";
  jsEntryPoint = "./src/client/init.ls";
  jadeEntryPoint = "./src/client/static/index.jade";
  echo("clear build directory");
  rm('-rf', './build/*');
  module.exports = {
    entry: [jsEntryPoint, "file?name=" + compileDir + "/index.html!jade-html?with=pretty!" + jadeEntryPoint],
    output: {
      path: __dirname,
      filename: compileDir + "/app.js"
    },
    module: {
      loaders: [
        {
          test: /\.ls$/,
          loader: 'livescript-loader'
        }, {
          test: /\.css$/,
          loader: "style-loader!css-loader"
        }
      ]
    },
    plugins: [new webpack.optimize.CommonsChunkPlugin("./src/dep", compileDir + "/vendor.js")],
    resolve: {
      extensions: ["", ".webpack.js", ".web.js", ".js", ".ls"]
    }
  };

---

如何将

dep/

文件夹中的所有文件连接到

vendor.js

？

文件是否直接引用

vendor

？这两者之间有什么关系？我不是网页包装专家。我已经实现了您的要求：（1）添加了一个额外的入口点：

entry:{…，vendor:['thevendor files']}

（2）使用

commonChunkPlugin

as:

插件：[new webpack.optimize.commonChunkPlugin（/*chunkName=*/'vendor'，/*filename=*/'vendor.bundle.js'），…]）

。请注意，

CommonChunkPlugin

的第一个参数是入口点的名称。这并不是webpack的真正工作方式——咕噜声/咕噜声更适合您所描述的内容。“webpack方式”是通过

require

指定应用程序代码中的依赖项，并让webpack根据需要处理这些模块的捆绑。将文件保存在某个目录中，并强制webpack将其捆绑在一起，这会使其依赖关系管理失去作用，并迫使开发人员对此负责。