关于Rails中Webpacker编译文件路径及自定义配置位置的问询

嘿，看你已经在Rails里把Webpack玩得挺溜了，Webpacker确实把Rails和Webpack的集成做得更顺手，我来给你捋清楚这两个问题：

一、Webpacker 编译文件的输出路径 #

和你之前直接把编译产物放到/public目录不同，Webpacker默认会把所有编译后的资源（JS、CSS、图片、字体这些）输出到public/packs目录下。

而且它会自动给文件名加上哈希值（比如application-789abc.js），帮你搞定缓存失效的问题，不用自己手动处理重命名。另外要注意：

• 开发环境下，如果用默认的webpack-dev-server，编译后的文件其实是存在内存里的，不会生成实际的磁盘文件，这样热重载更快；
• 生产环境执行rails assets:precompile后，会在public/packs下生成带哈希的实际文件。

二、Webpacker 的自定义配置位置 #

Webpacker把配置文件规整地放在config/webpack/目录下，核心配置和自定义需求都在这里处理：

• environment.js：这是全局基础配置文件，所有环境都会继承这里的设置。比如你要添加自定义loader、修改resolve规则、配置别名这些通用需求，都可以在这里写。举个简单例子，要是你想给SVG文件加个自定义loader，可以这么搞：

  const { environment } = require('@rails/webpacker')
  const svgLoader = {
    test: /\.svg$/,
    use: ['svg-sprite-loader']
  }
  environment.loaders.append('svg', svgLoader)
  module.exports = environment
  

• development.js/production.js/test.js：这三个是对应环境的配置文件，可以在这里覆盖全局配置，比如开发环境开启source map、生产环境压缩代码的额外规则等。

如果你的需求比较特殊，甚至可以直接修改Webpack的原始配置，通过environment.config.merge()来合并自定义的Webpack配置对象。

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