如何通过Rails/Webpacker实现单文件远程加载JS脚本？

问题原因 #

Webpacker默认会将代码拆分为runtime（运行时代码）、vendor（第三方依赖/开发工具依赖）和业务代码三个部分，单独加载业务脚本时，缺少前两部分的支撑，导致代码无法执行。

解决方案 #

1. 全局禁用代码拆分（适用于所有pack） #

修改config/webpack/environment.js，调整Webpack的代码拆分规则，将所有依赖打包进单个文件：

const { environment } = require('@rails/webpacker')

// 禁用代码拆分，合并所有依赖到单个文件
environment.splitChunks = {
  chunks: 'all',
  name: false,
  cacheGroups: {
    default: false,
    vendors: false
  }
}

module.exports = environment

修改后重启Webpacker服务，此时manifest.json中some对应的JS资源会只剩单个文件，远程直接引入即可正常执行。

2. 针对单个pack配置单文件打包（更灵活） #

如果不想影响其他pack的代码拆分逻辑，可以为特定pack单独配置：

• 在config/webpack目录下新建some_pack.js：

const { webpackConfig } = require('@rails/webpacker')
const merge = require('webpack-merge')

const customConfig = {
  entry: {
    some: './app/javascript/some.js' // 直接指向业务脚本文件
  },
  optimization: {
    splitChunks: false,
    runtimeChunk: false
  }
}

module.exports = merge(webpackConfig, customConfig)

• 修改config/webpacker.yml，指定该pack使用自定义配置：

development:
  <<: *default
  config_file: config/webpack/some_pack.js

重启服务后，some.js会被打包为单个独立文件，远程引入即可生效。

3. 生产环境适配 #

生产环境默认开启代码压缩与拆分，需确保config/webpack/production.js中同步禁用对应拆分配置，或沿用上述全局/单个pack的配置，打包后生成的单个文件可直接远程引入。

验证修改 #

修改配置并重启Webpacker后，查看manifest.json，some对应的JS资源应仅保留单个文件，此时在外部HTML中仅引入该文件，控制台就能正常输出loaded。

内容的提问来源于stack exchange，提问作者HJW