better binary file handling

Author: Jeff Escalante

README.md

@@ -8,7 +8,7 @@ Webpack loader that exports the source directly
 
 ### Why should you care?
 
-If you need to load up a file's source directly and have it available within your javascript, this loader is what you're after. For example, you could load up a svg file, parse out a path you want, and manipulate that with your javascript somehow. Or you could load up a json or text file. Or some other type of file that you came up with yourself. Whatever it is, as long as it's contents would be ok after being run through `JSON.stringify` (read: text files, not images or binary files), it will work just great with the source loader.
+If you need to load up a file's source directly and have it available within your javascript, this loader is what you're after. For example, you could load up a svg file, parse out a path you want, and manipulate that with your javascript somehow. Or you could load up a json or text file. Or some other type of file that you came up with yourself. Whatever it is, as long as it's contents would be ok after being run through `JSON.stringify` (read: text files, not images or binary files), it will work just great with the source loader. And if it is a binary file, it will work great as well, but you won't be able to require it in your client-side js, just manipulate it through a plugin.
 
 ### Installation
 
@@ -39,7 +39,7 @@ As an added bonus, this loader makes the buffered raw source available on the `l
 
 Let's break down how this could be done. Inside any plugin hook, you have a `compilation` object. You can get the `loaderContext` for any of the modules that webpack is processing through `compilation.modules` -- just find the one(s) you want by name. Now you have a large object which is an instance of the `DependenciesBlock` class, with a bunch of great information on it. You can find the raw buffered source under the `_src` property if the file was loaded with the source-loader.
 
-Wondering what sets this loader apart from [raw-loader](https://github.com/webpack/raw-loader)? This is it. Both loaders expose the file's contents to be required by webpack, but this loader also exposes the raw source for plugin processing. It also has tests, and is actively maintained, as a bonus.
+Wondering what sets this loader apart from [raw-loader](https://github.com/webpack/raw-loader)? This is it. Both loaders expose the file's contents to be required by webpack, but this loader also exposes the raw source for plugin processing. It also does not try to stringify binary files (which can cause bugs), has tests, and is actively maintained, as a bonus.
 
 ### License & Contributing
 

lib/index.js

@@ -1,6 +1,17 @@
+const isBinaryPath = require('is-binary-path')
+const url = require('url')
+
 module.exports = function (source) {
   this.cacheable && this.cacheable()
   this._module._src = source
-  return 'module.exports = ' + JSON.stringify(String(source))
+
+  const path = url.parse(this.request).pathname.match(/!(.*)$/)[1]
+  let src = 'module.exports = '
+  if (isBinaryPath(path)) {
+    src += '"binary"'
+  } else {
+    src += JSON.stringify(String(source))
+  }
+  return src
 }
 module.exports.raw = true

package.json

@@ -8,7 +8,7 @@
   },
   "bugs": "https://github.com/static-dev/source-loader/issues",
   "devDependencies": {
-    "ava": "0.14.x",
+    "ava": "^0.15.2",
     "coveralls": "2.x",
     "nyc": "6.x",
     "standard": "7.x",
@@ -26,5 +26,8 @@
     "lint": "standard",
     "coverage": "nyc ava",
     "coveralls": "nyc --reporter=lcov ava && cat ./coverage/lcov.info | coveralls"
+  },
+  "dependencies": {
+    "is-binary-path": "^1.0.1"
   }
 }

test/fixtures/binary.js

@@ -0,0 +1 @@
+require('./bun.gif')

test/fixtures/bun.gif

@@ -44,3 +44,23 @@ test.cb('raw source is added to loader context', (t) => {
     t.end()
   })
 })
+
+test.cb('binary files not exported but are made availble for plugins', (t) => {
+  const outputPath = path.join(fixturesPath, 'build-bin.js')
+
+  webpack({
+    context: fixturesPath,
+    entry: path.join(fixturesPath, 'binary'),
+    output: { path: fixturesPath, filename: 'build-bin.js' },
+    resolveLoader: {
+      alias: { source: path.join(__dirname, '../lib/index.js') }
+    },
+    module: { loaders: [{ test: /\.gif$/, loader: 'source' }] }
+  }, (err, res) => {
+    if (err) { t.fail(err) }
+    const src = fs.readFileSync(outputPath, 'utf8')
+    t.truthy(src.match(/module\.exports = "binary"/))
+    fs.unlinkSync(outputPath)
+    t.end()
+  })
+})