javascript - Webpack källkarta-importer är inte definierade (Firefox-debugger)
Jag har försökt lista ut webpack och generera sourcemaps. Medan sourcemaps kommer ut, kan jag inte debugga importerna. Se denna bild av Chrome-debuggern och Firefox (57 dev edition) debuggern (och bara som bevis på att debuggenen fungerar är här en webbplats på internet som debuggas i ett annat Firefox-fönster).
Jag skulle föredra att använda Firefox, så hur kan jag ställa in källkartor för att fungera korrekt och ge mig information om importerade moduler.
Mitt minimala exempel är här:
main.ts
import { write } from './utils';
import { Stack } from './stack';
const appRef: any= document.querySelector('#app');
const stack: Stack = new Stack(['alice', 'bob', 'eve']);
stack.add('charlie');
write(stack.members.toString(), appRef);
stack.ts
export class Stack {
private _members: string[];
constructor(members: string[]) {
this._members = members;
}
get members(): string[] {
return this._members;
}
push(member: string) {
this._members.push(member);
}
pop(): string | undefined {
return this._members.pop();
}
}
utils.ts
export function write(text: string, domElement: any) {
if (domElement) {
const textNode: any = document.createTextNode(text);
domElement.append(textNode);
} else {
document.write(text);
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"strict": true
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, '.'),
hot: true
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
};