将导入的供应商文件拆分为供应商捆绑包

时间:2016-05-12 18:32:34

标签: javascript webpack

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

取自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 /vendor /fooLibrary fooLibrary.js fooLibrary.css

我想要的是将这些文件移动到供应商包中,但无法确定如何在供应商入口点中指定这些文件。

1 个答案:

答案 0 :(得分:1)

您可以将abs路径设置为供应商lib

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构建lib从abs路径到供应商包。

enter image description here

但只有当index.js存在时导入才有效,因此在您使用webpack复制插件将供应商文件模块重命名为index.js或使用任何任务脚本进行实例gulp任务之前。