Webpack使用供应商块的node_modules而不明确说明它们
问题说明
所以代码拆分是创建不同捆绑包的技术 - 所以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.
这篇好文章是转载于：学新通技术网
