webpack打包entry的问题

Question

如图，我想把react-redux,redux单独提出来到vendors中。最后打包出来的main.js居然还是包含了react-redux,redux的代码。这是怎么回事。应该怎么做才能完全分离出来

Answer 1

谢邀！
首先您要明白 webpack 本身只能打包commonjs规范的js文件，并无其他功能。那我们其他功能怎么来的呢？loader 和 plugin 显得尤为重要！

loader 用于加载某些资源文件，它作用于一个个文件上。诸如css，图片，jsx， coffee等等，webpack是没有办法加载的。 这就需要对应的loader将资源转化并加载进来。

而plugin用于扩展webpack的功能。它直接作用于 webpack。当然loader也时变相的扩展webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载，比如我们公共代码提取就需要webpack插件CommonsChunkPlugin，大致代码如下：

new webpack.optimize.CommonsChunkPlugin({
    name: "vendors",
    children: true,
    // (选择所有被选 chunks 的子 chunks)
    minChunks: 3,
}),

详细文档请参考：
中文地址：https://doc.webpack-china.org...
英文地址：https://webpack.js.org/plugin...

Answer 2

你应该需要把公共代码抽出来,类似下面的代码：

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks: Infinity
  })
]

具体参考链接：commons-chunk-plugin

最后，感谢邀请，希望帮到你