improves sourcemaps (codesandbox#3621)

christianalfoni · web-flow · commit 0cd95375bef1 · 2020-03-05T13:11:47.000+01:00
diff --git a/packages/app/config/webpack.common.js b/packages/app/config/webpack.common.js
@@ -163,31 +163,6 @@ module.exports = {
 
   module: {
     rules: [
-      {
-        test: /\.(graphql|gql)$/,
-        exclude: /node_modules/,
-        loader: `graphql-tag/loader`,
-      },
-      {
-        test: /\.wasm$/,
-        loader: 'file-loader',
-        type: 'javascript/auto',
-      },
-      {
-        test: /\.scss$/,
-        use: getStyleLoaders(
-          {
-            importLoaders: 2,
-            sourceMap: true,
-          },
-          'sass-loader'
-        ),
-        // Don't consider CSS imports dead code even if the
-        // containing package claims to have no side effects.
-        // Remove this when webpack adds a warning or an error for this.
-        // See https://github.com/webpack/webpack/issues/6571
-        sideEffects: true,
-      },
       // Transpile node dependencies, node deps are often not transpiled for IE11
       {
         test: [
@@ -209,6 +184,8 @@ module.exports = {
         ],
         loader: 'babel-loader',
         query: {
+          retainLines: true,
+          cacheDirectory: true,
           presets: [
             '@babel/preset-flow',
             [
@@ -234,6 +211,31 @@ module.exports = {
           ],
         },
       },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: `graphql-tag/loader`,
+      },
+      {
+        test: /\.wasm$/,
+        loader: 'file-loader',
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.scss$/,
+        use: getStyleLoaders(
+          {
+            importLoaders: 2,
+            sourceMap: true,
+          },
+          'sass-loader'
+        ),
+        // Don't consider CSS imports dead code even if the
+        // containing package claims to have no side effects.
+        // Remove this when webpack adds a warning or an error for this.
+        // See https://github.com/webpack/webpack/issues/6571
+        sideEffects: true,
+      },
       {
         test: /\.(j|t)sx?$/,
         include: [paths.src, /@emmetio/],
diff --git a/packages/app/config/webpack.dev.js b/packages/app/config/webpack.dev.js
@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const merge = require('webpack-merge');
 // const webpack = require('webpack');
 const WebpackBar = require('webpackbar');
@@ -19,7 +20,7 @@ module.exports = merge(
   },
   commonConfig,
   {
-    devtool: 'eval',
+    devtool: false,
     mode: 'development',
     output: {
       filename: 'static/js/[name].js',
@@ -32,6 +33,9 @@ module.exports = merge(
     },
     plugins: [
       new WebpackBar(),
+      new webpack.EvalSourceMapDevToolPlugin({
+        include: /src\/app/,
+      }),
       // new webpack.HotModuleReplacementPlugin(),
     ],
   }
