[AngualrJS + Webpack] Production Source Maps

最新推荐文章于 2025-08-15 15:58:00 发布

转载最新推荐文章于 2025-08-15 15:58:00 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/4798270.html

文章标签：

#webpack #javascript #ViewUI

本文介绍如何在使用Webpack的uglify插件压缩Angular代码时，通过添加source-map来简化生产环境下的调试工作。具体方法包括在配置文件中设置devtool为'source-map'，并使用UglifyJsPlugin进行代码压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

Add source map to the production:

if(process.env.NODE_ENV === "production"){
    config.output.path = __dirname + "/dist";
    config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
    config.devtool = 'source-map';
}

var webpack = require('webpack')
    path = require('path');

path.resolve(__dirname, "app");

var config = {
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
           ON_TEST: process.env.NODE_ENV === "test"
        })
    ],
    module: {
        loaders: [
            {test: /\.js$/, loader: 'ng-annotate-loader!babel-loader', exclude: /node_modules/},
            {test: /\.html$/, loader: 'html-loader', exclude: /node_modules/},
            {test: /\.css$/, loader: 'style!css', exclude: /node_modules/},
            {test: /\.styl/, loader: 'style!css!stylus', exclude: /node_modules/}
        ]
    }
};

if(process.env.NODE_ENV === "production"){
    config.output.path = __dirname + "/dist";
    config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
    config.devtool = 'source-map';
}

module.exports = config;