首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让splitChunks生成commonjs requires()语句?

splitChunks是webpack中的一个插件,用于将公共的模块提取出来,以减少打包后的文件大小。默认情况下,splitChunks会生成异步加载的代码,即使用import()语句来加载模块。

如果要让splitChunks生成commonjs requires()语句,可以通过配置splitChunks的参数来实现。具体步骤如下:

  1. 在webpack配置文件中,找到splitChunks的配置项,一般是optimization.splitChunks。
  2. 在splitChunks的配置项中,设置chunks参数为'all',表示将所有模块都进行拆分。
  3. 设置enforceSizeThreshold参数为0,表示不对模块大小进行限制。
  4. 设置minChunks参数为1,表示只要一个模块被多个入口引用了,就会被提取出来。
  5. 设置automaticNameDelimiter参数为'_',表示生成的文件名中使用下划线作为分隔符。
  6. 设置cacheGroups参数,用于配置具体的拆分规则。可以根据需要配置多个cacheGroups。
    • 设置test参数为/moduleA/,表示匹配模块路径中包含/moduleA/的模块。
    • 设置name参数为'moduleA',表示生成的文件名为moduleA。
    • 设置priority参数为10,表示优先级为10,数字越大优先级越高。
    • 设置enforce参数为true,表示强制拆分该模块。
    • 设置reuseExistingChunk参数为true,表示如果该模块已经被拆分过,可以复用已有的拆分文件。

配置示例:

代码语言:txt
复制
optimization: {
  splitChunks: {
    chunks: 'all',
    enforceSizeThreshold: 0,
    minChunks: 1,
    automaticNameDelimiter: '_',
    cacheGroups: {
      moduleA: {
        test: /moduleA/,
        name: 'moduleA',
        priority: 10,
        enforce: true,
        reuseExistingChunk: true
      }
    }
  }
}

这样配置后,webpack在打包时会将所有模块中匹配/moduleA/的部分提取出来,生成一个commonjs requires()语句的文件,文件名为moduleA。

腾讯云相关产品推荐:腾讯云云服务器(ECS),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券