使用Babel和Webpack与Aurelia生成.js源地图

Question

我试图在使用webpack，babel-loader和Aurelia时发出js源映射（不确定Aurelia在这种情况下是否也很重要，但如果有的话，我也将其包括在内）。 我什至没有一个星期要学习如何使用Webpack。 我遇到很多困难的一件事就是要发出js源映射。

我试图在以下位置使用答案：

使用babel和webpack时如何生成源地图？

和

Webpack-dev-server不会生成源映射

但不幸的是，我仍然在chrome开发人员工具窗口中看到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'但是可惜，我似乎找不到在chrome开发人员工具中发出这些源图的位置。 我得出的结论是它们根本没有被释放出来。

我确实在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; （用作断点），并保持浏览器的devtools打开。 例如：

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

现在，您应该看到调试器在ES2016级别运行。