Skip to content

Commit f34a3ae

Browse files
author
Jeff Escalante
committed
Merge pull request #69 from carrot/custom-loaders
support custom webpack loaders in app.js
2 parents 834ac8b + aa15bea commit f34a3ae

File tree

11 files changed

+72
-23
lines changed

11 files changed

+72
-23
lines changed

‎lib/config.js

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ export default class Config {
5151
jadeTemplates: Joi.bool().default(false),
5252
cssTemplates: Joi.bool().default(false),
5353
plugins: Joi.array().default([]),
54+
module: Joi.object().default().keys({
55+
loaders: Joi.array().default([])
56+
}),
57+
resolve: Joi.object().default().keys({
58+
alias: Joi.object().default({})
59+
}),
5460
server: Joi.object().default().keys({
5561
port: Joi.number().default(1111),
5662
baseDir: Joi.string(),
@@ -143,14 +149,15 @@ export default class Config {
143149
// ignore node_modules and output directory automatically
144150
opts.ignore.unshift('**/node_modules/**', `${this.output.path}/**`)
145151

146-
this.module = {
147-
loaders: [
148-
{ test: mmToRe(opts.matchers.css), exclude: opts.ignore.map(mmToRe), loader: 'css-loader!postcss-loader' },
149-
{ test: mmToRe(opts.matchers.js), exclude: opts.ignore.map(mmToRe), loader: 'babel-loader' },
150-
{ test: mmToRe(opts.matchers.jade), exclude: opts.ignore.map(mmToRe), loader: 'jade-loader', query: { pretty: true, locals: this.locals } },
151-
{ test: mmToRe(opts.matchers.static), exclude: opts.ignore.map(mmToRe), loader: 'file-loader', query: { dumpDirs: opts.dumpDirs } }
152-
]
153-
}
152+
const rootsLoaders = [
153+
{ test: mmToRe(opts.matchers.css), exclude: opts.ignore.map(mmToRe), loader: 'css-loader!postcss-loader' },
154+
{ test: mmToRe(opts.matchers.js), exclude: opts.ignore.map(mmToRe), loader: 'babel-loader' },
155+
{ test: mmToRe(opts.matchers.jade), exclude: opts.ignore.map(mmToRe), loader: 'jade-loader', query: { pretty: true, locals: this.locals } },
156+
{ test: mmToRe(opts.matchers.static), exclude: opts.ignore.map(mmToRe), loader: 'file-loader', query: { dumpDirs: opts.dumpDirs } }
157+
]
158+
159+
this.module = opts.module
160+
this.module.loaders = opts.module.loaders.concat(rootsLoaders)
154161

155162
this.postcss = function (wp) {
156163
opts.postcss.plugins.unshift(postcssImport({ addDependencyTo: wp }))
@@ -181,6 +188,7 @@ export default class Config {
181188
].concat(opts.plugins)
182189

183190
this.server = opts.server
191+
this.resolve = opts.resolve
184192

185193
return this
186194
}

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"babel-plugin-rewire": "1.0.0-beta-5",
4949
"husky": "^0.10.2",
5050
"nyc": "^5.0.1",
51-
"rimraf": "^2.4.5",
5251
"snazzy": "^2.0.1",
5352
"standard": "^6.0.4"
5453
},

‎readme.md

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,23 @@ let project = new Roots({ root: 'path/to/project/root' })
3636

3737
The above shows a minimal instantiation, but the constructor accepts a wide variety of options, listed below.
3838

39-
Option | Description | Default
40-
:--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------
41-
**root** | **[required]** An absolute path to the root of your project. |
42-
**matchers** | An object with `jade`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Defaults are . Be very careful if you are trying to change this. | `**/*.jade`, `**/*.css`, and `**/*.js`
39+
Option | Description | Default
40+
:--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------
41+
**root** | **[required]** An absolute path to the root of your project. |
42+
**matchers** | An object with `jade`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Defaults are . Be very careful if you are trying to change this. | `**/*.jade`, `**/*.css`, and `**/*.js`
4343
**postcss** | An object that can contain a `plugins` key, which is an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing, and a `parser`, `stringifier`, and/or `syntax` key, each of which are objects and take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes) |
44-
**babelConfig** | A [configuration object for Babel](http://babeljs.io/docs/usage/options/) for JS processing. |
45-
**dumpDirs** | An array of directories which, if direct children of the project root, will dump their contents to the root on compile. Defaults to | `['views', 'assets']`.
46-
**locals** | An object containing locals to be passed to jade views. This can be used for values, functions, any sort of view helper you need. |
47-
**ignore** | An array of [micromatch](https://github.com/jonschlinkert/micromatch) strings, each one defining a file pattern to be ignored from compilation. |
48-
**outputDir** | The name or path of the folder your project will be compiled into, on top of the project's root. | `'public'`
49-
**plugins** | An array of webpack plugins. |
50-
**entry** | Webpack entry object duplicate. Can be used for code splitting and/or to use multiple bundles. | `{ 'js/main': ['./assets/js/index.js'] }`
51-
**modulesDirectories** | Webpack modulesDirectories array option, to select where modules can be loaded from. | `['node_modules', 'bower_components']`
52-
**jadeTemplates** | Boolean, if set to true, all jade templates will have a javascript template rendered alongside them in the output with the same name and `.js` appended to the end. | `false`
53-
**cssTemplates** | Boolean, if set to true, all css files will have a javascript template rendered alongside them in the output with the same name and `.js` appended to the end. | `false`
44+
**babelConfig** | A [configuration object for Babel](http://babeljs.io/docs/usage/options/) for JS processing. |
45+
**dumpDirs** | An array of directories which, if direct children of the project root, will dump their contents to the root on compile. Defaults to | `['views', 'assets']`.
46+
**locals** | An object containing locals to be passed to jade views. This can be used for values, functions, any sort of view helper you need. |
47+
**ignore** | An array of [micromatch](https://github.com/jonschlinkert/micromatch) strings, each one defining a file pattern to be ignored from compilation. |
48+
**outputDir** | The name or path of the folder your project will be compiled into, on top of the project's root. | `'public'`
49+
**plugins** | An array of webpack plugins. |
50+
**entry** | Webpack entry object duplicate. Can be used for code splitting and/or to use multiple bundles. | `{ 'js/main': ['./assets/js/index.js'] }`
51+
**modulesDirectories** | Webpack modulesDirectories array option, to select where modules can be loaded from. | `['node_modules', 'bower_components']`
52+
**jadeTemplates** | Boolean, if set to true, all jade templates will have a javascript template rendered alongside them in the output with the same name and `.js` appended to the end. | `false`
53+
**cssTemplates** | Boolean, if set to true, all css files will have a javascript template rendered alongside them in the output with the same name and `.js` appended to the end. | `false`
54+
**module.loaders** | Allows you to define an array of custom loaders. See [webpack's documentation](https://webpack.github.io/docs/configuration.html#module-loaders) for details |
55+
**resolve.alias** | Set up loader aliases, like if you wanted to load a local loader. See [webpack's documentation](https://webpack.github.io/docs/configuration.html#resolve-alias) for details |
5456

5557
> **Note:** Not familiar with minimatch or micromatch? Check out the [minimatch cheat sheet](https://github.com/motemen/minimatch-cheat-sheet) and test your patterns with [globtester](http://www.globtester.com). Trust us, it's a much cleaner and easier way to write regexes for the file system : )
5658

‎test/_helpers.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import ava from 'ava'
44
import When from 'when'
55
import node from 'when/node'
66
import Roots from '..'
7+
import rimrafLib from 'rimraf'
78

89
// export references to required modules and/or paths
910
export const fixturesPath = node_path.join(__dirname, 'fixtures')
1011
export const fs = node.liftAll(node_fs)
1112
export const test = ava
1213
export const path = node_path
14+
export const rimraf = rimrafLib
1315

1416
/**
1517
* compiles a fixture into it's `public/` directory

‎test/fixtures/loaders/app.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default {
2+
ignore: ['app.js', 'fooLoader.js'],
3+
resolve: {
4+
alias: {
5+
fooLoader: './fooLoader.js'
6+
}
7+
},
8+
module: {
9+
loaders: [{ test: /\.foo$/, loader: 'fooLoader' }]
10+
}
11+
}

‎test/fixtures/loaders/assets/js/foo.foo

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('from file')

‎test/fixtures/loaders/assets/js/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./foo.foo')

‎test/fixtures/loaders/fooLoader.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = function (source, map) {
2+
return JSON.stringify('overwritten from local loader')
3+
}

‎test/fixtures/loaders/index.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
h1 foo

‎test/fixtures/plugins/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export default {
44
locals: {
55
foo: 'bar'
66
},
7+
ignore: ['app.js', 'plugin.js'],
78
plugins: [
89
new TestPlugin()
910
]

‎test/loaders.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {
2+
test,
3+
compileFixture,
4+
fixturesPath,
5+
fs,
6+
path,
7+
rimraf
8+
} from './_helpers'
9+
10+
test.cb.beforeEach((t) => {
11+
rimraf(path.join(fixturesPath, 'loaders', 'public'), () => { t.end() })
12+
})
13+
14+
test('compiles a project with a custom loader', (t) => {
15+
return compileFixture(t, 'loaders')
16+
.then(({publicPath}) => { return path.join(publicPath, 'js/main.js') })
17+
.tap((index) => { return fs.stat(index).tap(t.ok.bind(t)) })
18+
.then((index) => { return fs.readFile(index, 'utf8') })
19+
.then((contents) => { return t.regex(contents, /overwritten from local loader/) })
20+
})

0 commit comments

Comments
 (0)