使用 webpack 2 拆分 "vendor" 块

Question

我有类似于官方的代码拆分配置docs 一切都很完美——我所有的节点模块都在 "vendor" 块中（包括 "babel-polyfill"）。但是现在我需要将 babel-polyfill 及其所有依赖项移动到单独的块 ("polyfills") 以便能够在我的供应商包之前加载它。有什么想法吗？

我的配置：

...
entry: {
  main: './index.jsx'
},
...
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module) {
    return module.context && module.context.indexOf('node_modules') !== -1;
  }
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' })
...

Answer 1

获取依赖项

您可以从 babel-polyfill

中阅读 package.json

const path = require('path');
 
function getDependencies () {

       // Read dependencies...
       const { dependencies } = require('node_modules/babel-polyfill/package.json');

       // Extract module name
       return Object.keys(dependencies);
}

只是调用它（应该 return 一个带有 dependencies 的数组）：

const dependencies = getDependencies(); // ['module', ...]

检测 polyfills

检查模块是否为 babel-polyfill 或依赖项：

 function isPolyfill(module){
     
     // Get module name from path
     const name = path.posix.basename(module.context)              
    
     // If module has a path 
     return name &&

     // If is main module or dependency
     ( name === "babel-polyfill" || dependencies.indexOf(name) !== -1 ); 
 }

要删除 babel-polyfill 和依赖项，只需检查 returns false

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module) {

        // If has path
        return module.context &&

        //If is a node-module
        module.context.indexOf('node_modules')!== -1 &&

        // Remove babel-polyfill and dependencies
        isPolyfill(module) === false;
    }
})

创建 polyfill 块

仅 select babel-polyfill 并且依赖项仅检查 returns true

new webpack.optimize.CommonsChunkPlugin({
    name: 'polyfills',

    minChunks: function (module) {

        // If has a path
        return module.context &&

        //If is a node-module
        module.context.indexOf('node_modules')!== -1 &&

        // Select only  babel-polyfill and dependencies
        isPolyfill(module) === true;
    }
})

使用 webpack 2 拆分 "vendor" 块

Split "vendor" chunk using webpack 2

javascript

webpack

webpack-2

code-splitting

commonschunkplugin

获取依赖项

检测 polyfills

创建 polyfill 块