我们在webpack的开发模式和生产模式下几乎具有相同的配置。两种情况下,我们都希望有源映射以便在浏览器中进行调试。对于开发模式而言,一切正常。我们的源文件出现在浏览器dev工具中,并且所有的文件都列在app2.min.js.map文件中。
{
"version":3,
"sources":[
"webpack:///webpack/bootstrap",
"webpack:///./app2/app.dev.ts",
"webpack:///./app2/app.module.ts",
"webpack:///./app2/app.routing.ts",
"webpack:///./app2/components/absenceManagement/...
...
但是在生产模式下,源映射将指向被压缩的捆绑文件
{
"version":3,
"sources":[
"webpack:///js/app2.min.js"
],
"names":[
"modules","installedModules",
"__webpack_require__",
...
因此,捆绑的 js 文件指向源映射(
//# sourceMappingURL=app2.min.js.map
),而源映射指回捆绑文件。我们的配置 webpack.dev.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = function () {
return webpackMerge(commonConfig,
{
devtool: 'source-map',
entry: {
app: './app2/app.dev.ts'
},
mode: 'development'
});
}
webpack.prod.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = function () {
return webpackMerge(commonConfig,
{
devtool: 'source-map',
entry: {
app: './app2/app.prod.ts'
},
mode: 'production'
});
}
webpack.common.js
const { CheckerPlugin } = require('awesome-typescript-loader');
module.exports = {
// Currently we need to add '.ts' to the resolve.extensions array.
resolve: {
extensions: ['.ts', '.tsx', '.js', '.html', '.css'],
modules: ['app2', 'node_modules', 'js']
},
// Add the loader for .ts files.
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /\.spec\.ts$/,
use: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.css$/,
loader: 'raw-loader'
},
{
test: /\.html$/,
loader: 'raw-loader'
}
]
},
plugins: [
new CheckerPlugin()
],
stats: {
colors: false
},
output: {
filename: './js/app2.min.js'
}
};
tsconfig.js
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./@types/",
"./node_modules/@types/",
"./js/"
],
"baseUrl": ".",
"paths": {
"typemoq": [ "js/typemoq" ]
},
"types": [
"lodash",
"moment",
"jquery",
"typemoq"
]
},
"awesomeTypescriptLoaderOptions": {
"useCache": true
},
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
部分 package.json 内容
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^5.2.1",
...
"typescript": "^2.9.2",
"webpack": "^4.19.1",
"webpack-merge": "^4.1.4",
"webpack-stream": "^5.1.1"