Error stacktrace with angular 2 and webpack 2

Vote count: 0

I am trying to setup dev environment with angular2/webpack2 stack and i have next webpack config:

// Helper: root() is defined at the bottom
var path = require("path");
var webpack = require("webpack");

// Webpack Plugins
var autoprefixer = require("autoprefixer");
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");



module.exports = function makeWebpackConfig(env) {

  var config = {};

  config.devtool = "source-map";

  config.entry = {
    "main": "./src/main.ts",
    "vendor": "./src/vendor.ts",
    "polyfills": "./src/polyfills.ts"
  }

  config.output = {
    "chunkFilename": "js/[name].[hash].chunk.js",
    "filename": "js/[name].js",
    "path":  root("dist"),
    "sourceMapFilename": '[file].map',

  };

  config.resolve = {
    extensions: [".ts", ".js", ".css", ".html"]
  };

  config.module = {
    rules: [
      { test: /\.ts$/,                                                                       loaders: ["awesome-typescript-loader", "angular2-template-loader"] },
      { test: /\.css$/, loaders: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader:  ["css-loader", "postcss-loader"] }) },
      { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,     loaders: ["file-loader?name=fonts/[name].[hash].[ext]?"] },
      { test: /\.html$/,                                                                     loaders: ["raw-loader"] }
    ]
  };

  config.plugins = [
    new ExtractTextPlugin(
      { filename: "css/[name].[hash].css" }
    ),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      root("./src")
    ),
    new webpack.LoaderOptionsPlugin({
      options: {
        sassLoader: {},
        postcss: [autoprefixer({ browsers: ["last 2 version"] })]
      }
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunksSortMode: "dependency"
    }),
    new CommonsChunkPlugin({
      name: ["vendor", "polyfills"]
    }),
  ];

  config.devServer = {
    contentBase: './src',
    historyApiFallback: true,
    quiet: true,
    stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
  };

  return config;
};

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

my problem: i can see valid ts source-map files (see "2" on pic), but when i got exception i see only references to compiled bundle (see "1" on pic) in stacktrace. question: How can i configure webpack to see correct references to source-map *.ts files, but not to compiled bundle js files?

asked 9 secs ago

Sergey Shulik

Let's block ads! (Why?)

Error stacktrace with angular 2 and webpack 2