diff --git a/README.md b/README.md index 6812461..af4c732 100644 --- a/README.md +++ b/README.md @@ -45,8 +45,47 @@ If you have nested or sibling Routes that you want to be loaded together, you ca ``` -This will cause the `user` chunk to be loaded if any of the three user pages is loaded. It will also mean that you won't need two separate calls for the base class and child class. +This will cause the `user` chunk to be loaded if any of the three user pages is loaded. +It will also mean that you won't need two separate calls for the base class and child class. +#### Named chunks with placeholders + +You can also use the [standard Webpack placeholders](https://github.com/webpack/loader-utils#interpolatename) in the name of your chunks. + +```js + + + +``` + +Would generate three chunks, exported in `userdetails.js`, `usersettings.js` and so on. +Using this approach allows you to setup your loader globally through an exclude/include rule in your `webpack.config.js`. +To avoid conflicts it may be best to prefix your `name` with a subfolder name, such as `routes/`: + +```js +loaders: [ + { + test: /\.js$/, + exclude: /src\/Pages/, + loader: 'babel', + }, + { + test: /\.js$/, + include: /src\/Pages/, + loaders: ['react-router-proxy?name=routes/[name]', 'babel'], + } +], +``` + +This has the advantage of making your router a lot leaner: + +```js + + + +``` + +The generated files would then go into `routes/userdetails`, `routes/usersettings` etc. ## Changelog diff --git a/index.js b/index.js index 01d1c6f..f8e4894 100644 --- a/index.js +++ b/index.js @@ -8,6 +8,10 @@ module.exports = function() {}; module.exports.pitch = function(remainingRequest) { this.cacheable && this.cacheable(); var query = loaderUtils.parseQuery(this.query); + var chunkName = loaderUtils.interpolateName(this, query.name, { + context: this.options.context, + content: remainingRequest, + }).toLowerCase(); var moduleRequest = "!!" + remainingRequest; return [ @@ -30,7 +34,7 @@ module.exports.pitch = function(remainingRequest) { ' else {', ' callback();', ' }', - ' }' + (query.name ? ', ' + JSON.stringify(query.name) : '') + ');', + ' }' + (query.name ? ', ' + JSON.stringify(chunkName) : '') + ');', ' },', ' willTransitionFrom: function(transition, component, callback) {', ' var componentClass = component && component.state ? component.state.component : null;', @@ -53,7 +57,7 @@ module.exports.pitch = function(remainingRequest) { ' var module = require(' + JSON.stringify(moduleRequest) + ');', ' component = module.__esModule ? module["default"] : module;', ' if(callback) callback(component);', - ' }' + (query.name ? ', ' + JSON.stringify(query.name) : '') + ');', + ' }' + (query.name ? ', ' + JSON.stringify(chunkName) : '') + ');', ' } else if(callback) callback(component);', ' return component;', ' }',