Browse Source

HUE-9377 [ui] Translate all absolute paths added by Vue to relative paths in the js.map files

Johan Ahlen 5 năm trước cách đây
mục cha
commit
19089ffa12
3 tập tin đã thay đổi với 99 bổ sung9 xóa
  1. 33 3
      webpack.config.js
  2. 33 3
      webpack.config.login.js
  3. 33 3
      webpack.config.workers.js

+ 33 - 3
webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const BundleTracker = require('webpack-bundle-tracker');
+const fs = require('fs');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -8,6 +9,35 @@ const { VueLoaderPlugin } = require('vue-loader');
 const path = require('path');
 const each = require('lodash/fp/each');
 
+// Vue generates absolute paths in the .js.map files for vue-hot-reload-api, this replaces it
+// with a relative path.
+class RemoveVueAbsolutePathFromMapPlugin {
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      'RemoveVueAbsolutePathFromMapPlugin',
+      (compilation, callback) => {
+        compilation.chunks.forEach(chunk => {
+          chunk.files.forEach(filename => {
+            if (/\.js\.map$/.test(filename)) {
+              const source = compilation.assets[filename].source();
+              if (/"[^"]+\/node_modules\/vue-hot-reload-api/.test(source)) {
+                const actualFilename = filename.split('/').pop();
+                const outputFilename = compilation.outputOptions.path + '/' + actualFilename;
+                const cleanSource = source.replace(
+                  /"[^"]+\/node_modules\/vue-hot-reload-api/gi,
+                  '"../../../../../../../../node_modules/vue-hot-reload-api'
+                );
+                fs.writeFileSync(outputFilename, cleanSource);
+              }
+            }
+          });
+        });
+        callback();
+      }
+    );
+  }
+}
+
 // https://github.com/ezhome/webpack-bundle-tracker/issues/25
 class RelativeBundleTracker extends BundleTracker {
   convertPathChunks(chunks) {
@@ -98,14 +128,14 @@ module.exports = {
     new webpack.SourceMapDevToolPlugin({
       filename: 'hue/[file].map',
       publicPath: '/static/desktop/js/bundles/hue/',
-      fileContext: 'public',
-      exclude: ['hotReload.js', 'styleInjection.js']
+      fileContext: 'public'
     }),
     new CleanWebpackPlugin([__dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/hue']),
     new RelativeBundleTracker({ path: '.', filename: 'webpack-stats.json' }),
     new webpack.BannerPlugin(
       '\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n'
     ),
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new RemoveVueAbsolutePathFromMapPlugin()
   ]
 };

+ 33 - 3
webpack.config.login.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const BundleTracker = require('webpack-bundle-tracker');
+const fs = require('fs');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -8,6 +9,35 @@ const { VueLoaderPlugin } = require('vue-loader');
 const path = require('path');
 const each = require('lodash/fp/each');
 
+// Vue generates absolute paths in the .js.map files for vue-hot-reload-api, this replaces it
+// with a relative path.
+class RemoveVueAbsolutePathFromMapPlugin {
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      'RemoveVueAbsolutePathFromMapPlugin',
+      (compilation, callback) => {
+        compilation.chunks.forEach(chunk => {
+          chunk.files.forEach(filename => {
+            if (/\.js\.map$/.test(filename)) {
+              const source = compilation.assets[filename].source();
+              if (/"[^"]+\/node_modules\/vue-hot-reload-api/.test(source)) {
+                const actualFilename = filename.split('/').pop();
+                const outputFilename = compilation.outputOptions.path + '/' + actualFilename;
+                const cleanSource = source.replace(
+                  /"[^"]+\/node_modules\/vue-hot-reload-api/gi,
+                  '"../../../../../../../../node_modules/vue-hot-reload-api'
+                );
+                fs.writeFileSync(outputFilename, cleanSource);
+              }
+            }
+          });
+        });
+        callback();
+      }
+    );
+  }
+}
+
 // https://github.com/ezhome/webpack-bundle-tracker/issues/25
 class RelativeBundleTracker extends BundleTracker {
   convertPathChunks(chunks) {
@@ -86,8 +116,7 @@ module.exports = {
     new webpack.SourceMapDevToolPlugin({
       filename: 'login/[file].map',
       publicPath: '/static/desktop/js/bundles/login/',
-      fileContext: 'public',
-      exclude: ['hotReload.js', 'styleInjection.js']
+      fileContext: 'public'
     }),
     new CleanWebpackPlugin([
       __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/login'
@@ -96,6 +125,7 @@ module.exports = {
     new webpack.BannerPlugin(
       '\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n'
     ),
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new RemoveVueAbsolutePathFromMapPlugin()
   ]
 };

+ 33 - 3
webpack.config.workers.js

@@ -1,11 +1,41 @@
 const webpack = require('webpack');
 const BundleTracker = require('webpack-bundle-tracker');
+const fs = require('fs');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
 
 const path = require('path');
 const each = require('lodash/fp/each');
 
+// Vue generates absolute paths in the .js.map files for vue-hot-reload-api, this replaces it
+// with a relative path.
+class RemoveVueAbsolutePathFromMapPlugin {
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      'RemoveVueAbsolutePathFromMapPlugin',
+      (compilation, callback) => {
+        compilation.chunks.forEach(chunk => {
+          chunk.files.forEach(filename => {
+            if (/\.js\.map$/.test(filename)) {
+              const source = compilation.assets[filename].source();
+              if (/"[^"]+\/node_modules\/vue-hot-reload-api/.test(source)) {
+                const actualFilename = filename.split('/').pop();
+                const outputFilename = compilation.outputOptions.path + '/' + actualFilename;
+                const cleanSource = source.replace(
+                  /"[^"]+\/node_modules\/vue-hot-reload-api/gi,
+                  '"../../../../../../../../node_modules/vue-hot-reload-api'
+                );
+                fs.writeFileSync(outputFilename, cleanSource);
+              }
+            }
+          });
+        });
+        callback();
+      }
+    );
+  }
+}
+
 // https://github.com/ezhome/webpack-bundle-tracker/issues/25
 class RelativeBundleTracker extends BundleTracker {
   convertPathChunks(chunks) {
@@ -77,8 +107,7 @@ module.exports = {
     new webpack.SourceMapDevToolPlugin({
       filename: 'workers/[file].map',
       publicPath: '/static/desktop/js/bundles/workers/',
-      fileContext: 'public',
-      exclude: ['hotReload.js', 'styleInjection.js']
+      fileContext: 'public'
     }),
     new CleanWebpackPlugin([
       __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/workers/'
@@ -86,6 +115,7 @@ module.exports = {
     new RelativeBundleTracker({ path: '.', filename: 'webpack-stats-workers.json' }),
     new webpack.BannerPlugin(
       '\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n'
-    )
+    ),
+    new RemoveVueAbsolutePathFromMapPlugin()
   ]
 };