webpack4单页面如何提取第三方公共库

Question

webpack4单页面如何提取第三方公共库？例如我项目引用了jquery,lodash等第三方库，现在打包出来都在index.js里面，如何把这些库分离出来呢？

Answer 1

分开打包呢，接CDN，就如楼上所说，使用extenal；

如果是分开打包，就可以了解一下webpack的

optimization: {
        splitChunks: {
          minSize: 30000,
          cacheGroups: {
            antd: {
              test: /[\\/]node_modules[\\/]antd[\\/]/,
              name: 'vendor-antd',
              chunks: 'all'
            },
            vendor: {
              test: /[\\/]node_modules[\\/](react|react-dom|moment|react-document-title|bind-decorator)[\\/]/,
              name: 'vendor-common',
              chunks: 'all'
            },
          }
        }
      };

上面展示的是，我的项目中，对antd和react生态，分开打包的配置

Answer 2

外部扩展(externals)

module.exports = {
  //...
  externals : {
    jquery: "$",
    lodash:"_"
  }

Answer 3

webpack的dllplugin

Answer 4

2楼正解

// 提取公共模块，包括第三方库和自定义工具库等
    optimization: {
        // 找到chunk中共享的模块,取出来生成单独的chunk
        splitChunks: {
            chunks: "all",  // async表示抽取异步模块，all表示对所有模块生效，initial表示对同步模块生效
            cacheGroups: {
                vendors: {  // 抽离第三方插件
                    test: /[\\/]node_modules[\\/]/,     // 指定是node_modules下的第三方包
                    name: "vendors",
                    priority: -10                       // 抽取优先级
                },
                utilCommon: {   // 抽离自定义工具库
                    name: "common",
                    minSize: 0,     // 将引用模块分离成新代码文件的最小体积
                    minChunks: 2,   // 表示将引用模块如不同文件引用了多少次，才能分离生成新chunk
                    priority: -20
                }
            }
        },
        // 为 webpack 运行时代码创建单独的chunk
        runtimeChunk:{
            name:'manifest'
        }
    }