Rails 6与Webpacker集成时HTML Partial无法加载问题排查

看起来你遇到的问题主要有两个核心点：Webpack插件的注册冲突，以及Rails和Webpacker的工作模式不匹配，下面一步步帮你分析解决：

1. 首先修复插件名称冲突的问题 #

你在注册HtmlWebpackPlugin和HtmlWebpackPartialsPlugin时，都用了同一个标识'Provide'，这会导致第二个插件直接覆盖第一个——Webpacker的插件系统会用标识来区分插件，同名的话后面的会替换前面的。这就导致HtmlWebpackPartialsPlugin找不到对应的HtmlWebpackPlugin实例来挂载，自然不会生效。

修改你的environments.js，给两个插件设置唯一的标识：

const { environment } = require('@rails/webpacker')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin')

// 给第一个插件设置唯一标识
environment.plugins.prepend(
  'HtmlWebpackPlugin',
  new HtmlWebpackPlugin({
    // 可选：指定输出的HTML文件名，默认是index.html
    filename: 'application.html',
    // 如果需要基于Rails的布局模板生成，可指定模板路径
    template: path.join(__dirname, '../../app/views/layouts/application.html.erb')
  })
)

// 给第二个插件设置另一个唯一标识
environment.plugins.prepend(
  'HtmlWebpackPartialsPlugin',
  new HtmlWebpackPartialsPlugin({
    path: path.join(__dirname, './partials/ga.html'),
    location: 'head',
    priority: 'high'
  })
)

module.exports = environment;

2. 解决Rails与Webpacker的HTML生成不匹配问题 #

即使修复了插件冲突，你可能还是看不到效果——因为Rails默认是用ERB模板动态渲染HTML，而HtmlWebpackPlugin生成的HTML文件是放在public/packs目录下的静态文件，Rails默认不会自动使用这个文件。

如果你坚持要用Webpack来管理HTML Partial，更适合Rails的方式是动态插入HTML片段，而不是用HtmlWebpackPartialsPlugin生成整个HTML：

方案：用raw-loader加载HTML并动态插入 #

1. 先安装raw-loader：

yarn add raw-loader --dev

2. 在environments.js中添加raw-loader的规则，让Webpack能解析HTML文件：

environment.loaders.append('raw', {
  test: /\.html$/,
  use: ['raw-loader']
})

3. 创建一个新的pack文件，比如app/javascript/packs/ga_loader.js：

// 导入HTML partial内容
import gaPartial from '../partials/ga.html';

// 将内容插入到页面的head标签末尾
document.head.insertAdjacentHTML('beforeend', gaPartial);

4. 在你的Rails布局文件（比如app/views/layouts/application.html.erb）中引入这个pack：

<%= javascript_pack_tag 'ga_loader', defer: true %>

这样启动Webpack Dev Server后，页面加载时就会自动把ga.html的内容插入到head里，你就能看到测试alert了。

3. 更符合Rails习惯的替代方案 #

其实在Rails应用中，完全可以不用Webpack来加载这种简单的HTML Partial——直接用Rails自带的partial机制更省心：

1. 把ga.html放到app/views/shared/ga.html.erb目录下
2. 在你的布局文件的head中直接渲染这个partial：

<%= render 'shared/ga' %>

这种方式不需要依赖Webpack，更符合Rails的开发模式，除非你的partial里需要引用Webpack打包的资源。

最后，记得运行bin/webpack-dev-server或者bin/webpack重新编译，确认没有编译错误~

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