javascript - 将导入的 vendor 文件拆分为 vendor 包

Question

使用 Webpack，支持将代码拆分为不同的包。其中一个选项是指定您想要选择作为分割点的一组模块。

取自 here :

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

这展示了如何拆分像jquery这样的模块。然而，对于一些不在node_modules中的JavaScript库，它们可能存在于更传统的设置中，例如:


/src
/lib
/小贩
/foo图书馆
fooLibrary.js
fooLibrary.css


我想要的是将这些文件移至 vendor 包中，但无法弄清楚如何在 vendor 入口点中指定这些文件。

Answer 1

您可以设置 vendor 库的绝对路径

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./server.js",
    vendor: ["/mylib/"],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

并且 webpack 从abs路径构建lib到 vendor 包。

但是导入只有在index.js存在的情况下才有效，所以在你应该使用webpack复制插件将vendor文件模块重命名为index.js之前，或者使用任何任务脚本例如gulp任务。