Share directories between sprockets and webpacker

[ryanscottaudio]

Is there a way to let sprockets and webpacker resolve using the same directories? I'm working on porting an old codebase and I'm trying to use webpacker to process both JS and CSS right now, which works fine until you take into account the fact that a) we have CSS url requests to images that get resolved with webpacker AND b) we have .jst.eco templates that get compiled by webpacker (so we can't use the asset_pack_path helper in them) that need to make requests for images. The same image might be both imported into a CSS file AND requested from a template file. Right now, the requesting using sprockets to the directory with the images (app/assets/images) only works when I turn off webpack-dev-server.

[ryanscottaudio]

Upon further exploration, it seems like running ./bin/webpack-dev-server blocks sprockets even without adding app/assets/images to my resolved_paths. Here's the rest of my webpacker.yml if that helps:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/assets
  source_entry_path: packs
  public_output_path: assets
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  resolved_paths:
    - 'app/assets/js'
    - 'app/assets/less'
    - 'app/assets/css'
    - 'vendor/assets/stylesheets'
    - 'vendor/assets/javascripts'
    - 'vendor/assets/fonts'
    - 'vendor/less'
    # - 'node_modules'

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .erb
    - .js.coffee.erb
    - .js.coffee
    - .jst.eco
    - .js
    - .es6.jsx
    - .css
    - .less
    - .css.less
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .eot
    - .woff
    - .woff2

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

This could all be mitigated if there was a way to use asset_pack_path in webpack's compiled files somehow; is there a way to do that (or to somehow do two build steps for it or make certain paths easier to hard-code)?

[ryanscottaudio]

Figured this out: public_output_path cannot be the same as the path that sprockets uses to serve assets.

[meatherly]

@ryanscottaudio would this help? #488 (comment)