javascript - Como ter um bundle.js mais legível com webpack (sourcemap)?


Estou a tentar fazer o meu primeiro projeto webpack e não consigo encontrar uma forma de mudar as chaves numéricas, que representam os módulos no meu output bundle.js, para uma string descritiva de forma a ser mais fácil rastreá-las no debugger...

Tentei output.chunkFilename e output.sourceMapFilename sem sucesso.

É assim que a minha tarefa gulp se parece:

gulp.task('webpack', function (done) {
webpack({
    entry: {
        app: paths.src + "/main.js",
        vendor: ['react/addons', 'lodash']
    },
    output: {
        path: paths.dist,
        filename: "bundle.js",
        sourceMapFilename: '[file].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", 'vendor.bundle.js', Infinity)
    ]
}, function onWebpackComplete(err, stats) {
    if (err) throw new gutil.PluginError("webpack", err);
    done();
});
});

É mesmo possível? Estou a usá-lo mal? Há uma maneira melhor?

Obrigado!

Resposta #1

No seu ficheiro webpack.config.js adicione exports.output.pathinfo=true