如何单独捆绑供应商脚本,并根据需要使用Webpack?

2020/10/23 04:21 · javascript ·  · 0评论

我正在尝试做一些我认为应该可行的事情,但是我真的不能仅仅从webpack文档中了解如何做到这一点。

我正在编写一个JavaScript库,其中包含几个可能相互依赖的模块。最重要的是,所有模块都使用jQuery,其中一些可能需要jQuery插件。然后,该库将在可能需要某些或所有模块的几个不同的网站上使用。

定义模块之间的依赖关系非常容易,但是定义它们的第三方依赖关系似乎比我预期的要难。

我想要实现的目标是:对于每个应用程序,我都希望拥有两个捆绑文件,一个捆绑文件具有必要的第三方依赖性,而另一个捆绑文件具有来自库中的必要模块。

示例:假设我的库具有以下模块:

  • a(需要:jquery,jquery.plugin1)
  • b(要求:jquery,a)
  • c(要求:jquery,jquery.ui,a,b)
  • d(要求:jquery,jquery.plugin2,a)

我有一个需要模块a,b和c的应用程序(将其视为唯一的条目文件)。在这种情况下,Webpack应生成以下文件:

  • 供应商捆绑包:带有jquery,jquery.plugin1和jquery.ui;
  • 网站捆绑:带有模块a,b和c;

最后,我希望将jQuery作为全局变量,所以我不需要在每个文件上都需要它(例如,我可以只在主文件上需要它)。jQuery插件只会在需要时扩展$全局(如果不需要这些模块的其他模块可以使用它们,这不是问题)。

假设有可能,这种情况下的webpack配置文件示例是什么?我在配置文件上尝试了加载程序,外部程序和插件的几种组合,但是我并没有真正了解它们在做什么以及应该使用哪些。谢谢!

在我的webpack.config.js(1,2,3版)文件中

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

在我的插件数组中

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

现在,我有一个仅根据需要将第3方库添加到一个文件的文件。

如果要更细化将供应商和入口点文件分开的位置,请执行以下操作:

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

请注意,插件的顺序非常重要。

另外,这将在版本4中更改。当正式发布时,我将更新此答案。

更新: Windows用户的indexOf搜索更改

我不确定我是否完全理解您的问题,但是由于最近有类似的问题,我会尽力帮助您。

供应商捆绑包。

您应该为此使用CommonsChunkPlugin在配置中,您指定块的名称(例如vendor)和将要生成的文件名(vendor.js)。

new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),

现在很重要的部分,您现在必须指定什么意思是vendor库,然后在输入部分进行操作。条目列表中还有一个条目与新声明的块的名称相同(在这种情况下,即“供应商”)。该条目的值应该是要移动到vendor捆绑的所有模块的列表在您的情况下,它应该类似于:

entry: {
    app: 'entry.js',
    vendor: ['jquery', 'jquery.plugin1']
}

jQuery作为全局

遇到了同样的问题,并通过ProvidePlugin解决了在这里,您不是在定义全局对象,而是定义模块的快捷方式。即,您可以像这样配置它:

new webpack.ProvidePlugin({
    $: "jquery"
})

现在您可以$在代码中的任何地方使用-Webpack会自动将其转换为

require('jquery')

希望对您有所帮助。您还可以看看我的WebPack配置文件,它是在这里

我喜欢webpack,但是我同意文档不是世界上最好的文档...但是,嘿..人们在一开始就对Angular文档说了同样的话:)


编辑:

要拥有特定于入口点的供应商块,只需多次使用CommonsChunkPlugins即可:

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),

然后为不同的文件声明不同的扩展库:

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery'
    ]
},

如果某些库在入口点之间重叠(并且对于大多数库而言是重叠的),则可以使用具有不同配置的同一插件将它们提取到公共文件中。请参阅示例。

如果您有兴趣将脚本与供应商的脚本分别自动捆绑在一起:

var webpack = require('webpack'),
    pkg     = require('./package.json'),  //loads npm config file
    html    = require('html-webpack-plugin');

module.exports = {
  context : __dirname + '/app',
  entry   : {
    app     : __dirname + '/app/index.js',
    vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
  },
  output  : {
    path      : __dirname + '/dist',
    filename  : 'app.min-[hash:6].js'
  },
  plugins: [
    //Finally add this line to bundle the vendor code separately
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
    new html({template : __dirname + '/app/index.html'})
  ]
};

您可以在官方文档中了解有关此功能的更多信息

也不确定我是否完全理解您的情况,但这是用于为每个捆绑包创建单独的供应商块的配置代码段:

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

并链接到CommonsChunkPlugin文档:http : //webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

本文地址:http://javascript.askforanswer.com/ruhedandukunbanggongyingshangjiaobenbinggenjuxuyaoshiyongwebpack.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!