[英]Webpack source-map targets to *.min.js bundle and not to the source files in production mode
我们在 webpack 中开发和生产模式的配置几乎相同。 在这两种情况下,我们都希望源映射能够在浏览器中进行调试。 对于开发模式,一切正常。 我们的源文件出现在浏览器开发工具中,我们所有的文件都列在 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'
}
};
配置文件
{
"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"
您可以尝试以下操作:
在你的 webpack 配置中设置terser-webpack-plugin
。 因此请参阅: https : //webpack.js.org/configuration/optimization/
然后使用UglifyJS
来缩小您的代码。 请参阅: https : //github.com/webpack-contrib/terser-webpack-plugin#terseroptions和https://github.com/mishoo/UglifyJS#minify-options 。
还要禁用由 webpack 本身完成的优化,您可以这样做:
module.exports = {
//...
optimization: {
minimize: false,
},
};`
您的生产环境的配置应如下所示:
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = function () {
return webpackMerge(commonConfig,
{
devtool: 'source-map',
entry: {
app: './app2/app.prod.ts'
},
mode: 'production',
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
sourceMap: {
filename: 'app2.min.js',
url: 'app2.min.js.map'
}
},
}),
],
},
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.