使用 webpack 映射 TS 的文件

Question

我开始使用webpack进行一个有角度的项目。捆绑包会生成文件，但我希望看到映射文件，以便在开发模式下编译时能够从浏览器调试 TS/JS 代码。

我的tsconfig.json是：

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"lib": [
"es2015",
"dom"
],
"typeRoots": [
"./node_modules/@types/"
]
},
"exclude": [
"node_modules",
"./angularApp/main-aot.ts"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false
}

我的 webpack.dev.js 看起来像这样：

const path = require('path');
const rxPaths = require('rxjs/_esm5/path-mapping');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const helpers = require('./webpack.helpers');
const ROOT = path.resolve(__dirname, '..');
console.log('@@@@@@@@@ USING DEVELOPMENT @@@@@@@@@@@@@@@');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
performance: {
hints: false
},
entry: {
polyfills: './angularApp/polyfills.ts',
vendor: './angularApp/vendor.ts',
app: './angularApp/main.ts'
},
output: {
path: ROOT + '/wwwroot/',
filename: 'dist/[name].bundle.js',
chunkFilename: 'dist/[id].chunk.js',
publicPath: '/'
},
resolve: {
extensions: ['.ts', ".tsx",'.js', '.json'],
alias: rxPaths()
},
devServer: {
historyApiFallback: true,
contentBase: path.join(ROOT, '/wwwroot/'),
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
module: {
rules: [
{
test: /.tsx?$/,
use: [
'awesome-typescript-loader',
'angular-router-loader',
'angular2-template-loader',
'source-map-loader',
'tslint-loader'
]
},
{
test: /.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
use: 'file-loader?name=assets/[name]-[hash:6].[ext]'
},
{
test: /favicon.ico$/,
use: 'file-loader?name=/[name].[ext]'
},
{
test: /.css$/,
use: ['style-loader', { 
loader: 'css-loader', 
options: { 
sourceMap: true 
} 
}]
},
{
test: /.scss$/,
include: path.join(ROOT, 'angularApp/styles'),
use: ['style-loader', { 
loader: 'css-loader', 
options: { 
sourceMap: true 
} 
}, { 
loader: 'sass-loader', 
options: { 
sourceMap: true 
} 
}]
},
{
test: /.scss$/,
exclude: path.join(ROOT, 'angularApp/styles'),
use: ['raw-loader', { 
loader: 'sass-loader', 
options: { 
sourceMap: true 
} 
}]
},
{
test: /.html$/,
use: 'raw-loader'
}
],
exprContextCritical: false
},
plugins: [
function () {
this.plugin('watch-run', function (watching, callback) {
console.log(
'x1b[33m%sx1b[0m',
`Begin compile at ${new Date().toTimeString()}`
);
callback();
});
},
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),

new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./wwwroot/dist', './wwwroot/assets'],
root: ROOT
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: 'body',
template: 'angularApp/index.html'
}),
new CopyWebpackPlugin([
{ from: './angularApp/images/*.*', to: 'assets/', flatten: true }
]),
new FilterWarningsPlugin({
exclude: /System.import/
})
]
};

"sourceMap"： true在带有devtool的ts.config中："inline-source-map"以及在ts文件的插件中使用source-map-loader应该会导致包含maps文件，但它们无处可见。 知道吗？

Answer 1

inline-source-map 表示"源映射代码"包含在原始 js 文件(生成的捆绑包(中，而不是包含在单独的文件中。

这似乎不是您想要实现的，请查看其他选项 webpack-sourcemap