javascript - Hur man får en mer läsbar bundle.js med webpack (sourcemap)?


Jag försöker göra mitt första webpack-projekt och jag kan inte hitta ett sätt att ändra de numeriska nycklarna, som representerar modulerna i min output bundle.js, till en beskrivande sträng så att det blir lättare att spåra det i debuggern...

Jag har försökt med output.chunkFilename och output.sourceMapFilename utan framgång.

Så här ser min gulp-uppgift ut:

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();
});
});

Är det ens möjligt? Använder jag det på fel sätt? Finns det ett bättre sätt?

Tack!

Svar #1

I din webpack.config.js-fil, lägg till exports.output.pathinfo=true