如何使用webpack（sourcemap）获得更易读的bundle.js？ [英] How to have a more readable bundle.js with webpack (sourcemap)?

问题描述

我正在尝试制作我的第一个webpack项目而我找不到更改数字键的方法，这些键表示我的模块将bundle.js输出到描述性字符串，以便在调试器中更容易跟踪它...

I'm trying to make my first webpack project and I cannot find a way to change the numeric keys, which represent the modules in my output bundle.js, to a descriptive string so it will be easier to trace it in the debugger...

我已经尝试了output.chunkFilename和输出。 sourceMapFilename没有成功。

I have tried output.chunkFilename and output.sourceMapFilename without success.

这是我的gulp任务的样子：

This is how my gulp task looks like:

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

甚至可能吗？我用错了吗？还有更好的方法吗？

Is it even possible? am I using it wrong? Is there a better way?

谢谢！

推荐答案

在你的webpack.config.js文件添加exports.output.pathinfo = true

In your webpack.config.js file add exports.output.pathinfo = true

这篇关于如何使用webpack（sourcemap）获得更易读的bundle.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！