Webpack使用供应商块中的node_modules而不明确说明它们 [英] Webpack using node_modules in vendor chunk without explicitly stating them

问题描述

所以代码拆分是创建不同捆绑包的技术 - 所以app ，供应商等...

So code splitting is the technique of creating different bundles - so app, vendor etc...

我知道我想要的供应商捆绑包但仅按惯例...

I know what I want in my vendor bundle but only by convention...

一切

import x from 'name';
import 'name';

这些必须在供应商中，因为（我认为它们）明显来自 node_modules 。

These need to be in vendor, because (i think they are) clearly coming from node_modules.

但是，我只看到明确说明的例子这个。

However, I've only seen examples of explicitly stating this.

有没有办法使用约定？

如果没有，我可以建立一个插件来做这个（这个插件可以进入 package.json 的依赖项部分）？

If not, could I build a plugin to do this (this plugin could just go into your dependencies section of package.json)?

推荐答案

你可以这样做：

const pkg = require（'./ package.json'）;

并在您的配置中：

{
   entry: {
      vendor: Object.keys(pkg.dependencies) // use node_module dependencies
   },
   plugins: [
     new webpack.optimize.CommonsChunkPlugin({
        name: "vendor"
     })
   ]
}

编辑：
似乎有更好的方法来做到这一点。可以在CommonsChunkPlugin插件中使用 minChunks 属性。你可以在那里传递一个函数：

It seems there is a better way to do it. One can use minChunks property in the CommonsChunkPlugin plugin. You can pass a function there, as such:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: ({ resource }) => {
            return resource && resource.match(/\.js$/) && resource.indexOf('node_modules') >= 0;
        }
    })
]

通过这样做，您不需要依赖package.json列表，webpack将只考虑项目中使用的依赖项。整洁。

By doing that, you don't need to rely on package.json list and webpack will consider only dependencies used in the project. neat.

这篇关于Webpack使用供应商块中的node_modules而不明确说明它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！