webpack:// 中缺少 TypeScript 源文件映射
Missing TypeScript source file mappings in webpack://
我正在尝试在 Webpack 中设置一个 Angular 2 应用程序(用 TypeScript 编写),以便它可以在 IntelliJ IDEA 15 中进行调试。我在本地使用 webpack-dev-server 提供它.
我注意到的一件事是,当我在 IntelliJ 调试器或 Chrome的检查员。
这是我在 Chrome 检查器中看到的列表,例如:
显示的文件很少。但这里是(一些)真正起作用的(如 IntelliJ IDEA 中所示):
这是我的 webpack.config.js
文件的样子:
// @AngularClass
/*
* Helper: root(), and rootDir() are defined at the bottom
*/
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
/*
* Config
*/
module.exports = {
// for faster builds use 'eval'
devtool: 'source-map',
debug: true, // remove in production
entry: {
// 'vendor': './src/vendor.ts',
'vendor': './src/vendor.ts',
'app': './src/app/app.ts' // our angular app
},
// Config for our build files
output: {
path: root('__build__'),
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
resolve: {
// ensure loader extensions match
alias: { // failed attempt to import into vendor.ts
jquery: path.join(__dirname, 'src/lib/jquery/jquery.min.js'),
'js.cookie': path.join(__dirname, 'src/lib/js.cookie/js.cookie.js'),
bootstrap: path.join(__dirname, 'src/lib/bootstrap/bootstrap.js')
},
extensions: ['', '.ts', '.js', '.json', '.css', '.html']
},
module: {
// preLoaders: [ { test: /\.ts$/, loader: 'tslint-loader' } ],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 -> Duplicate identifier
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
// Support for *.json files.
{test: /\.json$/, loader: 'json-loader'},
// Support for CSS as raw text
{test: /\.css$/, loader: 'raw-loader'},
// support for .html as raw text
{test: /\.html$/, loader: 'raw-loader'}
],
noParse: [/angular2-polyfills/]
},
plugins: [
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: Infinity}),
new CommonsChunkPlugin({name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor']})
// include uglify in production
],
// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},
// our Webpack Development Server config
devServer: {
historyApiFallback: true,
contentBase: 'src',
publicPath: '/__build__'
}
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
function rootNode(args) {
args = Array.prototype.slice.call(arguments, 0);
return root.apply(path, ['node_modules'].concat(args));
}
到目前为止,我没有成功调试我的应用程序,如果调试器无法使用创建的源映射将 运行 代码映射到我的源文件,这似乎也不足为奇通过 Webpack。
如果有人知道我可能需要做什么,我将不胜感激。
问题似乎与缓存有关。炸毁我的构建目录并重新启动 webpack(或 webpack-dev-server)导致一切都回来了。
简单地重新启动服务器没有影响。
我正在尝试在 Webpack 中设置一个 Angular 2 应用程序(用 TypeScript 编写),以便它可以在 IntelliJ IDEA 15 中进行调试。我在本地使用 webpack-dev-server 提供它.
我注意到的一件事是,当我在 IntelliJ 调试器或 Chrome的检查员。
这是我在 Chrome 检查器中看到的列表,例如:
显示的文件很少。但这里是(一些)真正起作用的(如 IntelliJ IDEA 中所示):
这是我的 webpack.config.js
文件的样子:
// @AngularClass
/*
* Helper: root(), and rootDir() are defined at the bottom
*/
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
/*
* Config
*/
module.exports = {
// for faster builds use 'eval'
devtool: 'source-map',
debug: true, // remove in production
entry: {
// 'vendor': './src/vendor.ts',
'vendor': './src/vendor.ts',
'app': './src/app/app.ts' // our angular app
},
// Config for our build files
output: {
path: root('__build__'),
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
resolve: {
// ensure loader extensions match
alias: { // failed attempt to import into vendor.ts
jquery: path.join(__dirname, 'src/lib/jquery/jquery.min.js'),
'js.cookie': path.join(__dirname, 'src/lib/js.cookie/js.cookie.js'),
bootstrap: path.join(__dirname, 'src/lib/bootstrap/bootstrap.js')
},
extensions: ['', '.ts', '.js', '.json', '.css', '.html']
},
module: {
// preLoaders: [ { test: /\.ts$/, loader: 'tslint-loader' } ],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 -> Duplicate identifier
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
// Support for *.json files.
{test: /\.json$/, loader: 'json-loader'},
// Support for CSS as raw text
{test: /\.css$/, loader: 'raw-loader'},
// support for .html as raw text
{test: /\.html$/, loader: 'raw-loader'}
],
noParse: [/angular2-polyfills/]
},
plugins: [
new CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: Infinity}),
new CommonsChunkPlugin({name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor']})
// include uglify in production
],
// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},
// our Webpack Development Server config
devServer: {
historyApiFallback: true,
contentBase: 'src',
publicPath: '/__build__'
}
};
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
function rootNode(args) {
args = Array.prototype.slice.call(arguments, 0);
return root.apply(path, ['node_modules'].concat(args));
}
到目前为止,我没有成功调试我的应用程序,如果调试器无法使用创建的源映射将 运行 代码映射到我的源文件,这似乎也不足为奇通过 Webpack。
如果有人知道我可能需要做什么,我将不胜感激。
问题似乎与缓存有关。炸毁我的构建目录并重新启动 webpack(或 webpack-dev-server)导致一切都回来了。
简单地重新启动服务器没有影响。