javascript - Webpack 在 vendor chunk 中使用 node_modules 而没有明确声明它们

Question

所以 code splitting是创建不同 bundle 的技术 - 所以应用程序、 vendor 等...

我知道在我的 vendor 包中我想要什么，但只是按照惯例......

任何东西

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

这些需要在 vendor 中，因为(我认为它们)显然来自 node_modules。

但是，我只看到了明确说明这一点的示例。

有没有办法使用约定？

如果没有，我可以构建一个插件来执行此操作(这个插件可以直接进入 package.json 的依赖项部分)吗？

Answer 1

你可以做的是:

const pkg = require('./package.json');

在你的配置中:

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

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

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

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