Add resolved_paths option (#557)

resolved_paths option to allow adding additional paths webpack should lookup when resolving modules

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## Unreleased
 
+### Added
+
+- `resolved_paths` option to allow adding additional paths webpack should lookup when resolving modules
+
+```yml
+  # config/webpacker.yml
+  # Additional paths webpack should lookup modules
+  resolved_paths: [] # empty by default
+```
+
 ### Fixed
 
 - Update `webpack-dev-server.tt` to respect RAILS_ENV and NODE_ENV values [#502](https://github.com/rails/webpacker/issues/502)

README.md

@@ -33,6 +33,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
   - [Webpack](#webpack-1)
   - [Loaders](#loaders)
   - [Paths](#paths)
+    - [Resolved Paths](#resolved-paths)
   - [Babel](#babel)
   - [Post-Processing CSS](#post-processing-css)
   - [CDN](#cdn)
@@ -368,6 +369,30 @@ development:
     https: false
 ```
 
+#### Resolved Paths
+
+If you are adding webpacker to an existing app that has most of the assets inside
+`app/assets` or inside an engine and you want to share that
+with webpack modules then you can use `resolved_paths`
+option available in `config/webpacker.yml`, which lets you
+add additional paths webpack should lookup when resolving modules:
+
+```yml
+resolved_paths: ['app/assets']
+```
+
+You can then import them inside your modules like so:
+
+```js
+// Note it's relative to parent directory i.e. app/assets
+import 'stylesheets/main'
+import 'images/rails.png'
+```
+
+**Note:** Please be careful when adding paths here otherwise it
+will make the compilation slow, consider adding specific paths instead of
+whole parent directory if you just need to reference one or two modules
+
 
 ### Babel
 

lib/install/config/webpack/configuration.js

@@ -27,8 +27,18 @@ const output = {
   publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
 }
 
+let resolvedModules = [
+  resolve(settings.source_path),
+  'node_modules'
+]
+
+if (settings.resolved_paths && Array.isArray(settings.resolved_paths)) {
+  resolvedModules = resolvedModules.concat(settings.resolved_paths)
+}
+
 module.exports = {
   settings,
+  resolvedModules,
   env,
   loadersDir,
   output

lib/install/config/webpack/shared.js

@@ -9,7 +9,7 @@ const { sync } = require('glob')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const extname = require('path-complete-extname')
-const { env, settings, output, loadersDir } = require('./configuration.js')
+const { env, settings, output, loadersDir, resolvedModules } = require('./configuration.js')
 
 const extensionGlob = `**/*{${settings.extensions.join(',')}}*`
 const entryPath = join(settings.source_path, settings.source_entry_path)
@@ -46,10 +46,7 @@ module.exports = {
 
   resolve: {
     extensions: settings.extensions,
-    modules: [
-      resolve(settings.source_path),
-      'node_modules'
-    ]
+    modules: resolvedModules
   },
 
   resolveLoader: {

lib/install/config/webpacker.yml

@@ -4,8 +4,13 @@ default: &default
   source_path: app/javascript
   source_entry_path: packs
   public_output_path: packs
+
   compile: false
 
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
   extensions:
     - .coffee
     - .erb