Aureliaでbabelとwebpackを使用して.jsソースマップを生成

Question

webpack、babel-loader、Aureliaを使用しているときにjsのソースマップを生成しようとしています（Aureliaがこのコンテキストでも重要なのかどうかは分かりませんが、もしそうなら）。私はwebpackの使い方を学ぶのに1週間もかかりません。私が多くの困難を抱えてきたことの1つは、jsソースマップを生成することです。

私が答えを使用しようとしました：

How do I generate sourcemaps when using babel and webpack?

と

Webpack-dev-server doesn't generate source maps

が、残念ながら私はまだ同じよう1.bundle.jsとbundle.jsを見ていますクロムの開発者ツールウィンドウにスクリプトファイルがあります。

は、ここで私は私の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" 
    } 
} 

と私の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' 
    } 
}; 

は私を判断してはいけない、私はまだこのすべてを学んでいます。ご覧のとおり、「dev」スクリプトのwebpack-dev-serverコマンドの-dオプションを有効にしました。私はdebug: trueとdevtool: 'source-map'を追加しましたが、残念ながら、私はこれらのソースマップがクローム開発ツールでどこに放出されているのかわかりません。彼らは私が彼らがまったく放出されていないと結論づけています。

私はwebpack：//で興味深いものを見つけました。ドメイン;私のすべてのAurelia jsは、それがbabelまたはwebpackによって変換されたように見えます。

Answer 1

は、この行を置き換えます。このため

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

を：

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

は、ビューモデルに（ブレーク・ポイントとして動作します）debugger;を入れて、開いたブラウザのデベロッパーツールを保ちます。たとえば、

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

ここで、ES2016レベルで動作するデバッガが表示されます。