Question

我的编辑器将.ts文件编译为.js和.js.map文件，并使用webpack捆绑.js个文件。（我不希望webpack负责编译.ts，因为错误不会在编辑器中正确显示。）

如果我将已编译的.js文件提供给webpack，则它不会获取现有的.js.map个文件（通过每个文件中的//# sourceMappingURL=...），因此生成的{{ 1}}指向bundle.js.map个文件，但不指向原始.js个文件。

如何让webpack保留现有的.ts个文件，以便生成的.js.map指向原始的bundle.js.map个文件？

Answer 1

结果是一个额外的webpack＆＃34; preLoader＆＃34;名为source-map-loader的诀窍是：

$ npm install source-map-loader --save

然后在webpack.config.js：

module.exports = {
    // ...
    devtool: 'source-map',
    module:  {
        preLoaders: [
            {
                test:   /\.js$/,
                loader: 'source-map-loader'
            }
        ]
    }
};

Answer 2

我不希望webpack负责编译.ts，因为错误不会在编辑器中正确显示

他们会，取决于你的编辑。例如。 atom-typescript有一个选项，允许你禁用compileOnSave https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md#compileonsave，但它仍会显示错误。

然后您还可以配置webpack，例如https://github.com/TypeStrong/ts-loader#options也会给你编译错误。

如何让webpack保留现有的.js.map文件，以便生成的bundle.js.map直接指向原始.ts文件

最简单的方法是让加载程序为你执行此操作，ts-loader执行此操作

Webpack使用先前构建步骤中的现有源映射

2 个答案: