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.
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.