Updated recording of asset names (#40)

* Modify loaderContext.emitFile to record assetNames * Updated dependencies * Updated tests * Min webpack version is now 4.4
webdeveric · Sep 26, 2018 · a40d857 · a40d857
1 parent 53b793a
commit a40d857
Show file tree

Hide file tree

Showing 8 changed files with 637 additions and 313 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,7 +5,7 @@ node_js:
   - "10"
   - "node"
 env:
-  - WEBPACK_VERSION=4.0 DEVSERVER_VERSION=3.0
+  - WEBPACK_VERSION=4.4 DEVSERVER_VERSION=3.0
   - WEBPACK_VERSION=latest DEVSERVER_VERSION=latest
 matrix:
   fast_finish: true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,22 +53,24 @@
     "webpack-sources": "^1.0.0"
   },
   "peerDependencies": {
-    "webpack": ">=4.0.0"
+    "webpack": ">=4.4.0"
   },
   "devDependencies": {
-    "chai": "^4.0",
+    "chai": "^4.2.0",
     "chai-spies": "^1.0.0",
+    "css-loader": "^1.0.0",
     "eslint": "^5.6.0",
     "eslint-config-webdeveric": "^0.3",
     "file-loader": "^2.0.0",
     "fs-extra": "^7.0.0",
     "istanbul": "^0.4",
     "jsdoc": "^3.0",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "^0.4.3",
     "mocha": "^5.2.0",
     "rimraf": "^2.0",
     "superagent": "^3.8.3",
-    "webpack": "^4.19.1",
-    "webpack-dev-server": "^3.1.8"
+    "webpack": "^4.20.2",
+    "webpack-dev-server": "^3.1.9"
   }
 }
diff --git a/src/WebpackAssetsManifest.js b/src/WebpackAssetsManifest.js
@@ -530,24 +530,27 @@ class WebpackAssetsManifest
   }
 
   /**
-   * Record module asset names
+   * Record asset names
    *
+   * @param  {object} loaderContext
    * @param  {object} module
-   * @param  {string} hashedFile
    */
-  handleModuleAsset(module, hashedFile)
+  handleNormalModuleLoader(loaderContext, module)
   {
-    if ( this.isHMR( hashedFile ) ) {
-      return false;
-    }
+    const { emitFile } = loaderContext;
+
+    loaderContext.emitFile = (name, content, sourceMap) => {
+      if ( ! this.assetNames.has( name ) ) {
+        const originalName = path.join(
+          path.dirname(name),
+          path.basename(module.userRequest)
+        );
 
-    return this.assetNames.set(
-      hashedFile,
-      path.join(
-        path.dirname(hashedFile),
-        path.basename(module.userRequest)
-      )
-    ).has( hashedFile );
+        this.assetNames.set(name, originalName);
+      }
+
+      return emitFile.call(module, name, content, sourceMap);
+    };
   }
 
   /**
@@ -557,7 +560,7 @@ class WebpackAssetsManifest
    */
   handleCompilation(compilation)
   {
-    compilation.hooks.moduleAsset.tap(PLUGIN_NAME, this.handleModuleAsset.bind(this));
+    compilation.hooks.normalModuleLoader.tap(PLUGIN_NAME, this.handleNormalModuleLoader.bind(this));
   }
 
   /**

diff --git a/test/WebpackAssetsManifest-test.js b/test/WebpackAssetsManifest-test.js
@@ -1290,16 +1290,6 @@ describe('WebpackAssetsManifest', function() {
       assert.isFalse( manifest.assetNames.has('0.123456.hot-update.js') );
     });
 
-    it('Should ignore HMR module assets', function() {
-      const compiler = makeCompiler(configs.client());
-      const manifest = new WebpackAssetsManifest();
-
-      manifest.apply(compiler);
-      manifest.handleModuleAsset({ userRequest: '' }, '0.123456.hot-update.js');
-
-      assert.isFalse( manifest.assetNames.has('0.123456.hot-update.js') );
-    });
-
     it('isHMR should return false when hotUpdateChunkFilename is ambiguous', function() {
       const manifest = new WebpackAssetsManifest();
       const config = configs.client();
@@ -1312,4 +1302,26 @@ describe('WebpackAssetsManifest', function() {
       assert.isFalse( manifest.isHMR('0.123456.hot-update.js') );
     });
   });
+
+  describe('Works with css files', function() {
+    it('Correct filenames are used', function(done) {
+      const manifest = new WebpackAssetsManifest({
+        space: 0,
+      });
+      const compiler = makeCompiler( configs.styles() );
+
+      manifest.apply( compiler );
+
+      compiler.run(function( err ) {
+        assert.isNull(err, 'Error found in compiler.run');
+
+        assert.equal(
+          '{"images/Ginger.jpg":"images/Ginger.jpg","styles.css":"styles.css","styles.js":"styles.js"}',
+          manifest.toString()
+        );
+
+        done();
+      });
+    });
+  });
 });
diff --git a/test/fixtures/configs.js b/test/fixtures/configs.js
@@ -65,6 +65,43 @@ function client()
   };
 }
 
+function styles()
+{
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+  return {
+    mode: 'development',
+    target: 'web',
+    entry: {
+      styles: path.resolve(__dirname, './styles.js'),
+    },
+    output: {
+      path: tmpDirPath(),
+      filename: '[name].js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.jpg$/i,
+          loader: 'file-loader?name=images/[name].[ext]',
+        },
+        {
+          test: /\.css$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+          ],
+        },
+      ],
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+      }),
+    ],
+  };
+}
+
 function server()
 {
   return {
@@ -103,12 +140,13 @@ function multi()
 }
 
 module.exports = {
-  hello: hello,
-  client: client,
-  server: server,
-  devServer: devServer,
-  multi: multi,
-  getTmpDir: getTmpDir,
-  tmpDirPath: tmpDirPath,
-  getWorkspace: getWorkspace,
+  hello,
+  client,
+  server,
+  devServer,
+  multi,
+  getTmpDir,
+  tmpDirPath,
+  getWorkspace,
+  styles,
 };
diff --git a/test/fixtures/styles.css b/test/fixtures/styles.css
@@ -0,0 +1,3 @@
+.ginger {
+  background: url('./Ginger.jpg');
+}
diff --git a/test/fixtures/styles.js b/test/fixtures/styles.js
@@ -0,0 +1,3 @@
+import './styles.css';
+
+console.log('Styles');