fix(debug): chrome debugger with webpack & TS breakpoints

ghiscoding · Mar 17, 2020 · 6c3ab52 · 6c3ab52
1 parent 1679daf
commit 6c3ab52
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 16 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -12,11 +12,11 @@
       "url": "http://localhost:8080",
       "webRoot": "${workspaceRoot}",
       "userDataDir": "${workspaceRoot}/.chrome",
-      "sourceMaps": true,
       "trace": true,
       "sourceMapPathOverrides": {
-        "webpack:///./*": "${webRoot}/*",
-        "webpack:///*": "${webRoot}/*"
+        "webpack:///../common/*": "${webRoot}/packages/common/*",
+        "webpack:///../vanilla-bundle/*": "${webRoot}/packages/vanilla-bundle/*",
+        "webpack:///./src/*": "${webRoot}/packages/vanilla-bundle-examples/src/*"
       }
     },
     {

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -2,7 +2,7 @@
   "name": "@slickgrid-universal/common",
   "version": "0.0.2",
   "description": "SlickGrid-Universal Common Code",
-  "main": "dist/es2020/index.js",
+  "main": "src/index.ts",
   "typings": "dist/es2020/index.d.ts",
   "author": "Ghislain B.",
   "license": "MIT",

diff --git a/packages/vanilla-bundle-examples/index.ejs b/packages/vanilla-bundle-examples/index.ejs
@@ -12,13 +12,9 @@
 </head>
 
 <body>
-  <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script> -->
   <div app="main">
     <div style="margin: 50px; font-weight: bold;">LOADING...</div>
   </div>
-  <script src="/app.bundle.js"></script>
 </body>
 
 </html>
diff --git a/packages/vanilla-bundle-examples/package.json b/packages/vanilla-bundle-examples/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.2",
   "description": "SlickGrid-Universal demo",
   "directories": {
-    "lib": "lib"
+    "src": "src"
   },
   "scripts": {
     "dev:watch": "webpack-dev-server --env.server --extractCss",

diff --git a/packages/vanilla-bundle-examples/webpack.config.js b/packages/vanilla-bundle-examples/webpack.config.js
@@ -8,7 +8,7 @@ const when = (condition, config, negativeConfig) =>
 const path = require('path');
 
 // primary config:
-const title = 'Slicker Bundler';
+const title = 'Slickgrid-Universal Vanilla Implementation Examples';
 const baseUrl = '';
 const outDir = path.resolve(__dirname, 'dist');
 const srcDir = path.resolve(__dirname, 'src');
@@ -33,10 +33,11 @@ module.exports = ({ production } = {}, { extractCss, analyze, tests, hmr, port,
     warnings: false
   },
   output: {
-    path: `${outDir}/bundle`,
+    path: outDir,
     publicPath: baseUrl,
-    filename: production ? '[name].bundle.js' : '[name].bundle.js',
-    sourceMapFilename: production ? '[name].bundle.map' : '[name].bundle.map',
+    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
+    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
+    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
   },
   resolve: {
     extensions: ['.ts', '.js'],
@@ -89,8 +90,8 @@ module.exports = ({ production } = {}, { extractCss, analyze, tests, hmr, port,
       // { from: 'assets', to: 'assets' }
     ])),
     ...when(extractCss, new MiniCssExtractPlugin({ // updated to match the naming conventions for the js files
-      filename: production ? '[name].bundle.css' : '[name].bundle.css',
-      chunkFilename: production ? '[name].bundle.css' : '[name].bundle.css'
+      filename: production ? '[name].[contenthash].bundle.css' : '[name].[hash].bundle.css',
+      chunkFilename: production ? '[name].[contenthash].chunk.css' : '[name].[hash].chunk.css'
     })),
   ]
 });
diff --git a/packages/vanilla-bundle/package.json b/packages/vanilla-bundle/package.json
@@ -2,7 +2,7 @@
   "name": "@slickgrid-universal/vanilla-bundle",
   "version": "0.0.2",
   "description": "Vanilla Slick Grid Bundle - Framework agnostic the output is to be used in vanilla JS/TS - Written in TypeScript and we also use WebPack to bundle everything into 1 JS file.",
-  "main": "dist/es2020/index.js",
+  "main": "src/index.ts",
   "typings": "dist/es2020/index.d.ts",
   "directories": {
     "src": "src"