fix: the writeToFile option has compatibility with webpack@5 (#459)

Author: evilebottnawi

azure-pipelines.yml

@@ -53,7 +53,6 @@ jobs:
         node-8-canary:
           node_version: ^8.9.0
           webpack_version: next
-          continue_on_error: true
     steps:
       - task: NodeTool@0
         inputs:
@@ -108,7 +107,6 @@ jobs:
         node-8-canary:
           node_version: ^8.9.0
           webpack_version: next
-          continue_on_error: true
     steps:
       - task: NodeTool@0
         inputs:
@@ -163,7 +161,6 @@ jobs:
         node-8-canary:
           node_version: ^8.9.0
           webpack_version: next
-          continue_on_error: true
     steps:
       - script: 'git config --global core.autocrlf input'
         displayName: 'Config git core.autocrlf'
@@ -198,4 +195,4 @@ jobs:
         displayName: 'Publish test results'
       - script: curl -s https://codecov.io/bash | bash -s -- -t $(CODECOV_TOKEN)
         condition: succeededOrFailed()
-        displayName: 'Submit coverage data to codecov'
+        displayName: 'Submit coverage data to codecov'

lib/fs.js

@@ -12,63 +12,68 @@ const DevMiddlewareError = require('./DevMiddlewareError');
 module.exports = {
   toDisk(context) {
     const compilers = context.compiler.compilers || [context.compiler];
+
     for (const compiler of compilers) {
-      compiler.hooks.afterEmit.tap('WebpackDevMiddleware', (compilation) => {
-        const { assets } = compilation;
-        const { log } = context;
-        const { writeToDisk: filter } = context.options;
-        let { outputPath } = compiler;
+      compiler.hooks.emit.tap('WebpackDevMiddleware', (compilation) => {
+        compiler.hooks.assetEmitted.tapAsync(
+          'WebpackDevMiddleware',
+          (file, content, callback) => {
+            let targetFile = file;
 
-        if (outputPath === '/') {
-          outputPath = compiler.context;
-        }
+            const queryStringIdx = targetFile.indexOf('?');
 
-        for (const assetPath of Object.keys(assets)) {
-          let targetFile = assetPath;
+            if (queryStringIdx >= 0) {
+              targetFile = targetFile.substr(0, queryStringIdx);
+            }
 
-          const queryStringIdx = targetFile.indexOf('?');
+            let { outputPath } = compiler;
 
-          if (queryStringIdx >= 0) {
-            targetFile = targetFile.substr(0, queryStringIdx);
-          }
+            // TODO Why? Need remove in future major release
+            if (outputPath === '/') {
+              outputPath = compiler.context;
+            }
 
-          const targetPath = path.isAbsolute(targetFile)
-            ? targetFile
-            : path.join(outputPath, targetFile);
-          const allowWrite =
-            filter && typeof filter === 'function' ? filter(targetPath) : true;
+            outputPath = compilation.getPath(outputPath, {});
 
-          if (allowWrite) {
-            const asset = assets[assetPath];
-            let content = asset.source();
+            const targetPath = path.join(outputPath, targetFile);
 
-            if (!Buffer.isBuffer(content)) {
-              // TODO need remove in next major release
-              if (Array.isArray(content)) {
-                content = content.join('\n');
-              }
+            const { writeToDisk: filter } = context.options;
+            const allowWrite =
+              filter && typeof filter === 'function'
+                ? filter(targetPath)
+                : true;
 
-              content = Buffer.from(content, 'utf8');
+            if (!allowWrite) {
+              return callback();
             }
 
-            mkdirp.sync(path.dirname(targetPath));
-
-            try {
-              fs.writeFileSync(targetPath, content, 'utf-8');
-
-              log.debug(
-                colors.cyan(
-                  `Asset written to disk: ${path.relative(
-                    process.cwd(),
-                    targetPath
-                  )}`
-                )
-              );
-            } catch (e) {
-              log.error(`Unable to write asset to disk:\n${e}`);
-            }
+            const { log } = context;
+            const dir = path.dirname(targetPath);
+
+            return mkdirp(dir, (mkdirpError) => {
+              if (mkdirpError) {
+                return callback(mkdirpError);
+              }
+
+              return fs.writeFile(targetPath, content, (writeFileError) => {
+                if (writeFileError) {
+                  return callback(writeFileError);
+                }
+
+                log.debug(
+                  colors.cyan(
+                    `Asset written to disk: ${path.relative(
+                      process.cwd(),
+                      targetPath
+                    )}`
+                  )
+                );
+
+                return callback();
+              });
+            });
           }
-        }
+        );
       });
     }
   },

test/fixtures/server-test/webpack.array.config.js

@@ -17,7 +17,7 @@ module.exports = [
         {
           test: /\.(svg|html)$/,
           loader: 'file-loader',
-          query: { name: '[name].[ext]' },
+          options: { name: '[name].[ext]' },
         },
       ],
     },

test/fixtures/server-test/webpack.client.server.config.js

@@ -15,7 +15,7 @@ module.exports = [
         {
           test: /\.(svg|html)$/,
           loader: 'file-loader',
-          query: { name: '[name].[ext]' },
+          options: { name: '[name].[ext]' },
         },
       ],
     },

test/fixtures/server-test/webpack.config.js

@@ -13,7 +13,7 @@ module.exports = {
       {
         test: /\.(svg|html)$/,
         loader: 'file-loader',
-        query: { name: '[name].[ext]' },
+        options: { name: '[name].[ext]' },
       },
     ],
   },

test/fixtures/server-test/webpack.querystring.config.js

@@ -13,7 +13,7 @@ module.exports = {
       {
         test: /\.(svg|html)$/,
         loader: 'file-loader',
-        query: { name: '[name].[ext]' },
+        options: { name: '[name].[ext]' },
       },
     ],
   },

test/server.test.js

@@ -88,16 +88,13 @@ describe('Server', () => {
       request(app)
         .get('/public/bundle.js')
         .expect('Content-Type', 'application/javascript; charset=UTF-8')
-        // TODO(michael-ciniawsky) investigate the need for this test
-        .expect('Content-Length', '4631')
         .expect(200, /console\.log\('Hey\.'\)/, done);
     });
 
     it('HEAD request to bundle file', (done) => {
       request(app)
         .head('/public/bundle.js')
         .expect('Content-Type', 'application/javascript; charset=UTF-8')
-        .expect('Content-Length', '4631')
         // eslint-disable-next-line no-undefined
         .expect(200, undefined, done);
     });
@@ -112,7 +109,6 @@ describe('Server', () => {
       request(app)
         .get('/public/svg.svg')
         .expect('Content-Type', 'image/svg+xml; charset=UTF-8')
-        .expect('Content-Length', '4778')
         .expect(200, done);
     });
 
@@ -189,8 +185,6 @@ describe('Server', () => {
       request(app)
         .post('/public/bundle.js')
         .expect('Content-Type', 'application/javascript; charset=UTF-8')
-        // TODO(michael-ciniawsky) investigate the need for this test
-        .expect('Content-Length', '4631')
         .expect(200, /console\.log\('Hey\.'\)/, done);
     });
 
@@ -248,8 +242,6 @@ describe('Server', () => {
     it('GET request to bundle file', (done) => {
       request(app)
         .get('/bundle.js')
-        // TODO(michael-ciniawsky) investigate the need for this test
-        .expect('Content-Length', '4631')
         .expect(200, /console\.log\('Hey\.'\)/, done);
     });
   });