如何使用 webpack (sourcemap) 获得更具可读性的 bundle.js？

Question

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

我试过 output.chunkFilename 和 output.sourceMapFilename 都没有成功。

这是我的 gulp 任务的样子：

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

这可能吗？我用错了吗？有没有更好的方法？

谢谢！

Answer 1

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

如何使用 webpack (sourcemap) 获得更具可读性的 bundle.js？

How to have a more readable bundle.js with webpack (sourcemap)?

javascript

commonjs

webpack