Public path asset handling (#61), reimplements #55, #57

* use webpack public path in asset emission (#55) * Windows pathing fixes (#57)
vercel · Jul 2, 2019 · 11f1fd2 · 11f1fd2
1 parent 5865757
commit 11f1fd2
Show file tree

Hide file tree

Showing 128 changed files with 311 additions and 232 deletions.
diff --git a/src/asset-relocator.js b/src/asset-relocator.js
@@ -119,13 +119,6 @@ function assetBase (options) {
   return outputAssetBase + '/';
 }
 
-function relAssetPath (context, options) {
-  const isChunk = context._module.reasons && context._module.reasons.every(reason => reason.module);
-  const filename = isChunk && context._compilation.outputOptions.chunkFilename || context._compilation.outputOptions.filename;
-  const backtrackDepth = filename.split(/[\\/]/).length - 1;
-  return '../'.repeat(backtrackDepth) + assetBase(options);
-}
-
 const staticProcess = {
   cwd: () => {
     return cwd;
@@ -287,14 +280,33 @@ function generateWildcardRequire(dir, wildcardPath, wildcardParam, wildcardBlock
   return `__ncc_wildcard$${wildcardBlockIndex}(${wildcardParam})`;
 }
 
+const hooked = new WeakSet();
+
 module.exports = async function (content, map) {
   if (this.cacheable)
     this.cacheable();
   this.async();
   const id = this.resourcePath;
   const dir = path.dirname(id);
+
+  // injection to set __webpack_require__.ab
+  const options = getOptions(this);
+  const { mainTemplate } = this._compilation;
+  if (!hooked.has(mainTemplate)) {
+    hooked.add(mainTemplate);
+
+    mainTemplate.hooks.requireExtensions.tap("asset-relocator-loader", (source, chunk) => {
+      let relBase = '';
+      if (chunk.name) {
+        relBase = path.relative(path.dirname(chunk.name), '.').replace(/\\/g, '/');
+        if (relBase.length)
+          relBase = '/' + relBase;
+      }
+      return `${source}\n${mainTemplate.requireFn}.ab = __dirname + ${JSON.stringify(relBase + '/' + assetBase(options))};`;
+    });
+  }
+
   if (id.endsWith('.node')) {
-    const options = getOptions(this);
     const assetState = getAssetState(options, this._compilation);
     const pkgBase = getPackageBase(this.resourcePath) || dir;
     await sharedlibEmit(pkgBase, assetState, assetBase(options), this.emitFile);
@@ -307,16 +319,15 @@ module.exports = async function (content, map) {
     assetState.assetPermissions[name] = permissions;
     this.emitFile(assetBase(options) + name, content);
 
-    this.callback(null, 'module.exports = __non_webpack_require__("./' + relAssetPath(this, options) + JSON.stringify(name).slice(1, -1) + '")');
+    this.callback(null, 'module.exports = __non_webpack_require__(__webpack_require__.ab + ' + JSON.stringify(name) + ')');
     return;
   }
 
   if (id.endsWith('.json'))
     return this.callback(null, code, map);
 
   let code = content.toString();
-
-  const options = getOptions(this);
+
   if (typeof options.production === 'boolean' && staticProcess.env.NODE_ENV === UNKNOWN) {
     staticProcess.env.NODE_ENV = options.production ? 'production' : 'dev';
   }
@@ -377,7 +388,7 @@ module.exports = async function (content, map) {
         this.emitFile(assetBase(options) + name, source);
       }
     });
-    return "__dirname + '/" + relAssetPath(this, options) + JSON.stringify(name).slice(1, -1) + "'";
+    return "__webpack_require__.ab + " + JSON.stringify(name);
   };
   const emitAssetDirectory = (wildcardPath, wildcards) => {
     const wildcardIndex = wildcardPath.indexOf(WILDCARD);
@@ -452,7 +463,7 @@ module.exports = async function (content, map) {
         assetExpressions += " + \'" + JSON.stringify(curPattern).slice(1, -1) + "'";
       }
     }
-    return "__dirname + '/" + relAssetPath(this, options) + JSON.stringify(name + firstPrefix).slice(1, -1) + "'" + assetExpressions;
+    return "__webpack_require__.ab + " + JSON.stringify(name + firstPrefix) + assetExpressions;
   };
 
   let assetEmissionPromises = Promise.resolve();

diff --git a/test/project-chunking/expected.js b/test/project-chunking/expected.js
@@ -4,6 +4,6 @@ const fs = require('fs');
 expect(output.length).toBe(18);
 
 // check relative asset references worked out
-expect(fs.readFileSync(__dirname + "/dist/modules/main.js").toString()).toContain(`"/../asset`);
-expect(fs.readFileSync(__dirname + "/dist/modules/chunk.js").toString()).toContain(`"/../asset`);
-expect(fs.readFileSync(__dirname + "/dist/modules/chunks/2.js").toString()).toContain(`"/../../asset`);
+expect(fs.readFileSync(__dirname + "/dist/modules/main.js").toString()).toContain(`ab+"asset`);
+expect(fs.readFileSync(__dirname + "/dist/modules/chunk.js").toString()).toContain(`ab+"asset`);
+expect(fs.readFileSync(__dirname + "/dist/modules/chunks/2.js").toString()).toContain(`ab+"asset`);
diff --git a/test/unit/amd-disable/output-coverage.js b/test/unit/amd-disable/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports

diff --git a/test/unit/amd-disable/output.js b/test/unit/amd-disable/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports

diff --git a/test/unit/array-emission/output-coverage.js b/test/unit/array-emission/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -90,16 +91,15 @@ module.exports =
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__dirname) {
+
 
 const fs = __webpack_require__(1);
 
 const REPORT_JAVASCRIPT = [
-  fs.readFileSync(__dirname + '/util.js', 'utf8'),
-  fs.readFileSync(__dirname + '/dom.js', 'utf8'),
+  fs.readFileSync(__webpack_require__.ab + "util.js", 'utf8'),
+  fs.readFileSync(__webpack_require__.ab + "dom.js", 'utf8'),
 ].join(';\n');
 
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/array-emission/output.js b/test/unit/array-emission/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -90,16 +91,15 @@ module.exports =
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__dirname) {
+
 
 const fs = __webpack_require__(1);
 
 const REPORT_JAVASCRIPT = [
-  fs.readFileSync(__dirname + '/util.js', 'utf8'),
-  fs.readFileSync(__dirname + '/dom.js', 'utf8'),
+  fs.readFileSync(__webpack_require__.ab + "util.js", 'utf8'),
+  fs.readFileSync(__webpack_require__.ab + "dom.js", 'utf8'),
 ].join(';\n');
 
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/array-holes/output-coverage.js b/test/unit/array-holes/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports

diff --git a/test/unit/array-holes/output.js b/test/unit/array-holes/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports

diff --git a/test/unit/asset-conditional/output-coverage.js b/test/unit/asset-conditional/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -89,9 +90,8 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(__dirname) {const path = __webpack_require__(1);
-let moduleJsPath = isHarmony ? __dirname + '/asset1.txt' : __dirname + '/asset2.txt';
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
+const path = __webpack_require__(1);
+let moduleJsPath = isHarmony ? __webpack_require__.ab + "asset1.txt" : __webpack_require__.ab + "asset2.txt";
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/asset-conditional/output.js b/test/unit/asset-conditional/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -89,9 +90,8 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(__dirname) {const path = __webpack_require__(1);
-let moduleJsPath = isHarmony ? __dirname + '/asset1.txt' : __dirname + '/asset2.txt';
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
+const path = __webpack_require__(1);
+let moduleJsPath = isHarmony ? __webpack_require__.ab + "asset1.txt" : __webpack_require__.ab + "asset2.txt";
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/asset-fs-existing-asset-name/output-coverage.js b/test/unit/asset-fs-existing-asset-name/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -89,10 +90,9 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(__dirname) {const fs = __webpack_require__(1);
-console.log(fs.readFileSync(__dirname + '/existing1.txt'));
+const fs = __webpack_require__(1);
+console.log(fs.readFileSync(__webpack_require__.ab + "existing1.txt"));
 
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/asset-fs-existing-asset-name/output.js b/test/unit/asset-fs-existing-asset-name/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -89,10 +90,9 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(__dirname) {const fs = __webpack_require__(1);
-console.log(fs.readFileSync(__dirname + '/existing1.txt'));
+const fs = __webpack_require__(1);
+console.log(fs.readFileSync(__webpack_require__.ab + "existing1.txt"));
 
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/asset-fs-inline-assign/output-coverage.js b/test/unit/asset-fs-inline-assign/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -89,16 +90,15 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(__dirname) {const fs = __webpack_require__(1);
+const fs = __webpack_require__(1);
 const { join } = __webpack_require__(2);
 
-console.log(fs.readFileSync(__dirname + '/asset.txt', 'utf8'));
+console.log(fs.readFileSync(__webpack_require__.ab + "asset.txt", 'utf8'));
 
 (function () {
   var join = () => 'nope';
-  console.log(fs.readFileSync(join(__dirname + '/asset-fs-inline-assign', 'asset.txt'), 'utf8'));
+  console.log(fs.readFileSync(join(__webpack_require__.ab + "asset-fs-inline-assign", 'asset.txt'), 'utf8'));
 })();
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/asset-fs-inline-assign/output.js b/test/unit/asset-fs-inline-assign/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -89,16 +90,15 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-/* WEBPACK VAR INJECTION */(function(__dirname) {const fs = __webpack_require__(1);
+const fs = __webpack_require__(1);
 const { join } = __webpack_require__(2);
 
-console.log(fs.readFileSync(__dirname + '/asset.txt', 'utf8'));
+console.log(fs.readFileSync(__webpack_require__.ab + "asset.txt", 'utf8'));
 
 (function () {
   var join = () => 'nope';
-  console.log(fs.readFileSync(join(__dirname + '/asset-fs-inline-assign', 'asset.txt'), 'utf8'));
+  console.log(fs.readFileSync(join(__webpack_require__.ab + "asset-fs-inline-assign", 'asset.txt'), 'utf8'));
 })();
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
 
 /***/ }),
 /* 1 */

diff --git a/test/unit/asset-fs-inline-path-enc-es-2/output-coverage.js b/test/unit/asset-fs-inline-path-enc-es-2/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -97,15 +98,14 @@ module.exports = require("fs");
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* WEBPACK VAR INJECTION */(function(__dirname) {/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(fs__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
-console.log(fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(__dirname + '/asset.txt', 'utf8'));
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
+console.log(fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(__webpack_require__.ab + "asset.txt", 'utf8'));
 
 /***/ }),
 /* 2 */

diff --git a/test/unit/asset-fs-inline-path-enc-es-2/output.js b/test/unit/asset-fs-inline-path-enc-es-2/output.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -97,15 +98,14 @@ module.exports = require("fs");
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* WEBPACK VAR INJECTION */(function(__dirname) {/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(fs__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
-console.log(fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(__dirname + '/asset.txt', 'utf8'));
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
+console.log(fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(__webpack_require__.ab + "asset.txt", 'utf8'));
 
 /***/ }),
 /* 2 */

diff --git a/test/unit/asset-fs-inline-path-enc-es-3/output-coverage.js b/test/unit/asset-fs-inline-path-enc-es-3/output-coverage.js
@@ -79,6 +79,7 @@ module.exports =
 /******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
+/******/ 	__webpack_require__.ab = __dirname + "/";
 /******/
 /******/
 /******/ 	// Load entry module and return exports
@@ -97,15 +98,14 @@ module.exports = require("fs");
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* WEBPACK VAR INJECTION */(function(__dirname) {/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(fs__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_1__);
 
 
 
-console.log(fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(__dirname + '/asset.txt', 'utf8'));
-/* WEBPACK VAR INJECTION */}.call(this, "/"))
+console.log(fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(__webpack_require__.ab + "asset.txt", 'utf8'));
 
 /***/ }),
 /* 2 */