Merge pull request #33 from peerigon/fix/webpack4-compat

deps: Add webpack 4 compatibility
peerigon · Mar 19, 2018 · 77f1a67 · 77f1a67
2 parents a80e3be + 0a6a715
commit 77f1a67
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 14 deletions.
diff --git a/examples/index-html/webpack.config.js b/examples/index-html/webpack.config.js
@@ -3,6 +3,7 @@ var path = require("path");
 var indexHtml = path.join(__dirname, "app", "index.html");
 
 module.exports = {
+    mode: "development",
     entry: [
         path.join(__dirname, "app", "main.js"),
         indexHtml
@@ -12,28 +13,36 @@ module.exports = {
         filename: "bundle.js"
     },
     module: {
-        loaders: [
+        rules: [
             {
                 test: indexHtml,
-                loaders: [
-                    "file-loader?name=[name].[ext]",
+                use: [
+                    {
+                        loader: "file-loader",
+                        options: {
+                            name: "[name].[ext]"
+                        }
+                    },
                     path.resolve(__dirname, "..", "..", "lib", "extractLoader.js"),
-                    "html-loader?" + JSON.stringify({
-                        attrs: ["img:src", "link:href"]
-                    })
+                    {
+                        loader: "html-loader",
+                        options: {
+                            attrs: ["img:src", "link:href"]
+                        }
+                    }
                 ]
             },
             {
                 test: /\.css$/,
-                loaders: [
+                use: [
                     "file-loader",
                     path.resolve(__dirname, "..", "..", "lib", "extractLoader.js"),
                     "css-loader"
                 ]
             },
             {
                 test: /\.jpg$/,
-                loader: "file-loader"
+                use: "file-loader"
             }
         ]
     }

diff --git a/examples/main-css/webpack.config.js b/examples/main-css/webpack.config.js
@@ -13,6 +13,7 @@ if (live) {
 }
 
 module.exports = {
+    mode: live ? "production" : "development",
     entry: [
         path.join(__dirname, "app", "main.js"),
         mainCss.join("!")

diff --git a/package.json b/package.json
@@ -50,7 +50,8 @@
     "nyc": "^11.4.1",
     "rimraf": "^2.6.2",
     "style-loader": "^0.19.1",
-    "webpack": "^3.10.0"
+    "webpack": "^4.0.0",
+    "webpack-cli": "^2.0.0"
   },
   "dependencies": {
     "loader-utils": "^1.1.0"

diff --git a/src/extractLoader.js b/src/extractLoader.js
@@ -28,7 +28,7 @@ const rndPlaceholder = "__EXTRACT_LOADER_PLACEHOLDER__" + rndNumber() + rndNumbe
 function extractLoader(content) {
     const callback = this.async();
     const options = getOptions(this) || {};
-    const publicPath = options.publicPath === undefined ? this.options.output.publicPath : options.publicPath;
+    const publicPath = getPublicPath(options, this);
     const dependencies = [];
     const script = new vm.Script(content, {
         filename: this.resourcePath,
@@ -123,6 +123,34 @@ function rndNumber() {
         .slice(2);
 }
 
+/**
+ * Retrieves the public path from the loader options, context.options (webpack <4) or context._compilation (webpack 4+).
+ * context._compilation is likely to get removed in a future release, so this whole function should be removed then.
+ * See: https://github.com/peerigon/extract-loader/issues/35
+ *
+ * @deprecated
+ * @param {Object} options - Extract-loader options
+ * @param {Object} context - Webpack loader context
+ * @returns {string}
+ */
+function getPublicPath(options, context) {
+    const property = "publicPath";
+
+    if (property in options) {
+        return options[property];
+    }
+
+    if (context.options && context.options.output && property in context.options.output) {
+        return context.options.output[property];
+    }
+
+    if (context._compilation && context._compilation.outputOptions && property in context._compilation.outputOptions) {
+        return context._compilation.outputOptions[property];
+    }
+
+    return "";
+}
+
 // For CommonJS interoperability
 module.exports = extractLoader;
 export default extractLoader;
diff --git a/test/extractLoader.test.js b/test/extractLoader.test.js
@@ -92,9 +92,8 @@ describe("extractLoader", () => {
     it("should track all dependencies", () =>
         compile({ testModule: "stylesheet.html" }).then(stats => {
             const basePath = path.dirname(__dirname); // returns the parent dirname
-            const dependencies = stats.compilation.fileDependencies.map(
-                dependency => dependency.slice(basePath.length)
-            );
+            const dependencies = Array.from(stats.compilation.fileDependencies)
+                .map(dependency => dependency.slice(basePath.length));
 
             expect(dependencies.sort()).to.eql(
                 [

diff --git a/test/support/compile.js b/test/support/compile.js
@@ -12,6 +12,7 @@ export default function ({ testModule, publicPath, loaderOptions }) {
     return new Promise((resolve, reject) => {
         webpack(
             {
+                mode: "development",
                 entry: testModulePath,
                 output: {
                     path: path.resolve(__dirname, "../dist"),
@@ -92,7 +93,7 @@ export default function ({ testModule, publicPath, loaderOptions }) {
             },
             (err, stats) => {
                 if (err || stats.hasErrors() || stats.hasWarnings()) {
-                    reject(err || stats.toString("errors-only"));
+                    reject(err || stats.toString("minimal"));
                 } else {
                     resolve(stats);
                 }