1

I am trying to get js sourcemaps to be emitted when using webpack, babel-loader, and Aurelia (not sure if Aurelia even matters in this context, but I'm including it in case it does). I'm not even one week into learning how to use webpack. One thing I have had a lot of difficulty is getting js source maps to be emitted.

I have tried to use the answers at:

How do I generate sourcemaps when using babel and webpack?

and

Webpack-dev-server doesn't generate source maps

but unfortunately I am still just seeing 1.bundle.js and bundle.js as the script files in chrome's developer tools window.

Here I will include my package.json:

{
  "name": "companyname.projectname.web",
  "version": "0.1.0",
  "sasslintConfig": "./.sass-lint.yml",
  "description": "lol",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool eval",
    "build": "webpack --config webpack.config.js --progress --profile",
    "prod": "webpack -p --config webpack.prod.config.js --progress --devtool source-map",
    "test": "karma start",
    "webdriver:update": "./node_modules/.bin/webdriver-manager update",
    "webdriver:start": "./node_modules/.bin/webdriver-manager start",
    "pree2e": "npm run webdriver:update -- --standalone",
    "e2e": "./node_modules/.bin/protractor"
  },
  "dependencies": {
    "aurelia-bootstrapper-webpack": "^1.0.0-beta.1.0.0",
    "aurelia-event-aggregator": "^1.0.0-beta.1.1.1",
    "aurelia-fetch-client": "^1.0.0-beta.1.1.0",
    "aurelia-framework": "^1.0.0-beta.1.1.3",
    "aurelia-history-browser": "^1.0.0-beta.1.1.2",
    "aurelia-logging-console": "^1.0.0-beta.1.1.4",
    "aurelia-pal-browser": "^1.0.0-beta.1.1.4",
    "aurelia-polyfills": "^1.0.0-beta.1.0.0",
    "aurelia-router": "^1.0.0-beta.1.1.1",
    "aurelia-templating-binding": "^1.0.0-beta.1.1.1",
    "aurelia-templating-resources": "^1.0.0-beta.1.1.1",
    "aurelia-templating-router": "^1.0.0-beta.1.1.1",
    "bluebird": "^3.3.4",
    "bootstrap": "^4.0.0-alpha.2",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "font-awesome": "^4.5.0",
    "imports-loader": "^0.6.5",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^2.2.3",
    "json-loader": "^0.5.4",
    "node-sass": "^3.6.0",
    "sass-loader": "^3.2.0",
    "tether": "^1.3.2",
    "whatwg-fetch": "^1.0.0"
  },
  "devDependencies": {
    "aurelia-tools": "^0.1.18",
    "aurelia-webpack-plugin": "^1.0.0-beta.1.0.0",
    "babel-core": "^6.7.2",
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-es2015-loose": "^7.0.0",
    "babel-preset-stage-1": "^6.5.0",
    "css-loader": "^0.23.1",
    "eonasdan-bootstrap-datetimepicker": "^4.15.35",
    "eslint": "^1.10.3",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.21",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^0.2.2",
    "karma-jasmine": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "node-sass": "^3.4.2",
    "protractor": "^3.2.1",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "wallaby-webpack": "0.0.21",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1"
  }
}

and my webpack.config.js:

/*eslint-disable no-var*/

var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
  debug: true,
  devServer: {
    host: 'localhost',
    port: 3000
  },
  devtool: 'source-map',
  entry: {
    main: [
      './src/main'
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  plugins: [
    new AureliaWebpackPlugin({
      src: path.resolve('./src')
    }),
    new ProvidePlugin({
      Promise: 'bluebird',
      jQuery: 'jquery',
      'window.Tether': 'tether',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new ExtractTextPlugin('global.css', {
      allChunks: false
    })
  ],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
      { test: /\.json$/, loader: 'json' },
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'], include: path.resolve('./sass') },
      { test: /\.html$/, loader: 'html' },
      { test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
    ]
  },
  node: {
    fs: 'empty'
  }
};

Don't judge me, I'm still learning all this. As you can see, I've enabled the -d option for webpack-dev-server command in the 'dev' script. I added: debug: true and devtool: 'source-map' but alas, I can't seem to find where these source maps are being emitted in the chrome developer tools; which has me concluding that they aren't being emitted at all.

I did find something interesting in the webpack://. domain; all my Aurelia js is there EXCEPT it looks like it's been converted by babel or webpack.

1 Answer 1

2

Replace this line:

...
"scripts": {
    "dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool eval"
...

For this:

...
"scripts": {
    "dev": "webpack-dev-server -d --config webpack.config.js --hot --inline --progress --devtool source-map"
...

Put a debugger; (which works as a break-point) in the view-model and keep the browser's devtools opened. For instance:

export class MyViewModel {
   constructor() {
     debugger;
     //...
   }
}

Now you should see the debugger working at ES2016 level.

Sign up to request clarification or add additional context in comments.

1 Comment

That worked; I appreciate your help! Also, this is the first time I have seen the debugger keyword. That will be very convenient.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.