使用 webpack 2 拆分“供应商”块

Posted 2023-02-19

【中文标题】使用 webpack 2 拆分“供应商”块

【英文标题】：Split "vendor" chunk using webpack 2

【发布时间】：2017-11-30 18:13:43

【问题描述】：

我有类似于官方docs的代码拆分配置 一切都很完美——我所有的节点模块都在“供应商”块中（包括“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' )
...

【问题讨论】：

***.com/questions/45311513/…

【参考方案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);

只需调用它（应该返回一个带有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 和依赖项，只需检查是否返回 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 块

要仅选择 babel-polyfill 和依赖项，只需检查是否返回 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;
    
)

【讨论】：

@EgorKomarov 请对此进行测试并报告错误/错误

@EgorKomarov 如果此答案对您有帮助，请标记为已接受，否则您应在问题中提供更多详细信息

fix in isPolyfill func: return name && (name === "babel-polyfill" || dependencies.indexOf(name) !== -1); 如果我只创建“vendor”或“polyfills”块，这是可行的，但我怎样才能同时创建它们?

谢谢，抱歉没测试，我修一下，先尝试创建polyfills块再创建vendor