Fatal编程技术网
  • javascript/
  • Javascript 网页包+；angularjs+；生产环境中es6类名的更改

Javascript 网页包+；angularjs+；生产环境中es6类名的更改

javascript angularjs webpack

Javascript 网页包+；angularjs+；生产环境中es6类名的更改,javascript,angularjs,webpack,Javascript,Angularjs,Webpack,我的项目使用了3个网页包文件（一个通用，两个用于dev/prod env）和.babelrc文件用于babel config .babelrc { "presets": ["@babel/preset-env"], "plugins": ["angularjs-annotate"] } webpack.common.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugi


我的项目使用了3个网页包文件（一个通用，两个用于dev/prod env）和.babelrc文件用于babel config

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["angularjs-annotate"]
}

webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const WebpackBar = require('webpackbar');

const pathPublic = "/public/path/";
const pathFonts = "/fonts/";


module.exports = {
    devtool: "eval",
    entry: {
        app: "./src/js/app.index.js",
    },
    module: {
        rules: [{
            test: /\.(gif|png|jpe?g)$/i,
            use: ["file-loader"],
        }, {
            test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    publicPath: pathPublic + pathFonts,
                    name: "[name].[ext]",
                    outputPath: pathFonts,
                    chunks: true
                }
            }]
        }, {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader"}
            ]
        }, {
            test: /\.scss$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader"},
                {loader: "sass-loader"}
            ]
        }, {
            test: /\.less$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader, options: {publicPath: pathPublic}},
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        }]
    },
    plugins: [
        new WebpackBar(),
        new CleanWebpackPlugin(["frontend/dist", "static/"], {root: __dirname + "/.."}),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            collapseWhitespace: false,
            template: path.join(__dirname, "src/assets/html/index.proto.html"),
            title: 'SC app front page',
            inject: "html",
            hash: true
        }),
        new ScriptExtHtmlWebpackPlugin({defaultAttribute: "defer"}),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: "styles.min.css",
        })
    ],
    stats: {
        children: false,
        colors: true
    },
};

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const pathDist = path.resolve(__dirname, "dist");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "[name].min.js",
        publicPath: "/public/path/",
        chunkFilename: "npm.[id].[chunkhash].min.js",
        path: pathDist
    },
    optimization: {
        runtimeChunk: "single",
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: false,
                uglifyOptions: {
                    compress: true,
                    output: {comments: false},
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(css|sass|scss|less)$/g,
                cssProcessor: require("cssnano")({
                    safe: true,
                    normalizeWhitespaces: true,
                    discardDuplicates: true,
                    discardComments: {
                        removeAll: true,
                    }
                })
            })
        ],
        splitChunks: {
            chunks: "all",
            maxInitialRequests: Infinity,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    maxSize: 249856, // 244 KiB Webpack recommended size
                },
            }
        },
    }
});

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const pathDist = path.resolve(__dirname, "dist");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    output: {
        filename: "[name].min.js",
        publicPath: "/public/path/",
        chunkFilename: "npm.[id].[chunkhash].min.js",
        path: pathDist
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: true,
                    output: {comments: false}
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(css|sass|scss|less)$/g,
                cssProcessor: require("cssnano")({
                    safe: true,
                    normalizeWhitespaces: true,
                    discardDuplicates: true,
                    discardComments: {
                        removeAll: true,
                    },
                })
            })
        ]
    },
    devServer: {
        contentBase: pathDist
    }
});

webpack.prod.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const WebpackBar = require('webpackbar');

const pathPublic = "/public/path/";
const pathFonts = "/fonts/";


module.exports = {
    devtool: "eval",
    entry: {
        app: "./src/js/app.index.js",
    },
    module: {
        rules: [{
            test: /\.(gif|png|jpe?g)$/i,
            use: ["file-loader"],
        }, {
            test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    publicPath: pathPublic + pathFonts,
                    name: "[name].[ext]",
                    outputPath: pathFonts,
                    chunks: true
                }
            }]
        }, {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader"}
            ]
        }, {
            test: /\.scss$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader"},
                {loader: "sass-loader"}
            ]
        }, {
            test: /\.less$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader, options: {publicPath: pathPublic}},
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        }]
    },
    plugins: [
        new WebpackBar(),
        new CleanWebpackPlugin(["frontend/dist", "static/"], {root: __dirname + "/.."}),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            collapseWhitespace: false,
            template: path.join(__dirname, "src/assets/html/index.proto.html"),
            title: 'SC app front page',
            inject: "html",
            hash: true
        }),
        new ScriptExtHtmlWebpackPlugin({defaultAttribute: "defer"}),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: "styles.min.css",
        })
    ],
    stats: {
        children: false,
        colors: true
    },
};

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const pathDist = path.resolve(__dirname, "dist");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "[name].min.js",
        publicPath: "/public/path/",
        chunkFilename: "npm.[id].[chunkhash].min.js",
        path: pathDist
    },
    optimization: {
        runtimeChunk: "single",
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: false,
                uglifyOptions: {
                    compress: true,
                    output: {comments: false},
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(css|sass|scss|less)$/g,
                cssProcessor: require("cssnano")({
                    safe: true,
                    normalizeWhitespaces: true,
                    discardDuplicates: true,
                    discardComments: {
                        removeAll: true,
                    }
                })
            })
        ],
        splitChunks: {
            chunks: "all",
            maxInitialRequests: Infinity,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    maxSize: 249856, // 244 KiB Webpack recommended size
                },
            }
        },
    }
});

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const pathDist = path.resolve(__dirname, "dist");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    output: {
        filename: "[name].min.js",
        publicPath: "/public/path/",
        chunkFilename: "npm.[id].[chunkhash].min.js",
        path: pathDist
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: true,
                    output: {comments: false}
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(css|sass|scss|less)$/g,
                cssProcessor: require("cssnano")({
                    safe: true,
                    normalizeWhitespaces: true,
                    discardDuplicates: true,
                    discardComments: {
                        removeAll: true,
                    },
                })
            })
        ]
    },
    devServer: {
        contentBase: pathDist
    }
});

webpack.dev.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const WebpackBar = require('webpackbar');

const pathPublic = "/public/path/";
const pathFonts = "/fonts/";


module.exports = {
    devtool: "eval",
    entry: {
        app: "./src/js/app.index.js",
    },
    module: {
        rules: [{
            test: /\.(gif|png|jpe?g)$/i,
            use: ["file-loader"],
        }, {
            test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    publicPath: pathPublic + pathFonts,
                    name: "[name].[ext]",
                    outputPath: pathFonts,
                    chunks: true
                }
            }]
        }, {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader"}
            ]
        }, {
            test: /\.scss$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader},
                {loader: "css-loader"},
                {loader: "sass-loader"}
            ]
        }, {
            test: /\.less$/,
            use: [
                {loader: "style-loader"},
                {loader: MiniCssExtractPlugin.loader, options: {publicPath: pathPublic}},
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        }]
    },
    plugins: [
        new WebpackBar(),
        new CleanWebpackPlugin(["frontend/dist", "static/"], {root: __dirname + "/.."}),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            collapseWhitespace: false,
            template: path.join(__dirname, "src/assets/html/index.proto.html"),
            title: 'SC app front page',
            inject: "html",
            hash: true
        }),
        new ScriptExtHtmlWebpackPlugin({defaultAttribute: "defer"}),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        new MiniCssExtractPlugin({
            filename: "styles.min.css",
        })
    ],
    stats: {
        children: false,
        colors: true
    },
};

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const pathDist = path.resolve(__dirname, "dist");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "[name].min.js",
        publicPath: "/public/path/",
        chunkFilename: "npm.[id].[chunkhash].min.js",
        path: pathDist
    },
    optimization: {
        runtimeChunk: "single",
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: false,
                uglifyOptions: {
                    compress: true,
                    output: {comments: false},
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(css|sass|scss|less)$/g,
                cssProcessor: require("cssnano")({
                    safe: true,
                    normalizeWhitespaces: true,
                    discardDuplicates: true,
                    discardComments: {
                        removeAll: true,
                    }
                })
            })
        ],
        splitChunks: {
            chunks: "all",
            maxInitialRequests: Infinity,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    maxSize: 249856, // 244 KiB Webpack recommended size
                },
            }
        },
    }
});

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const pathDist = path.resolve(__dirname, "dist");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = merge(common, {
    mode: "development",
    devtool: "inline-source-map",
    output: {
        filename: "[name].min.js",
        publicPath: "/public/path/",
        chunkFilename: "npm.[id].[chunkhash].min.js",
        path: pathDist
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                uglifyOptions: {
                    compress: true,
                    output: {comments: false}
                }
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.(css|sass|scss|less)$/g,
                cssProcessor: require("cssnano")({
                    safe: true,
                    normalizeWhitespaces: true,
                    discardDuplicates: true,
                    discardComments: {
                        removeAll: true,
                    },
                })
            })
        ]
    },
    devServer: {
        contentBase: pathDist
    }
});
问题是，当我进行开发构建时，es6类名保持不变，但当我进行产品构建时，es6类名会发生变化，这将破坏angularjs DI过程

示例：
假设有2个类（一个服务和一个控制器）

这些类通过这种方式在angularjs DI中注册

angular.module("MyApp")
    .controller(MyCtrl.prototype.constructor.name, MyCtrl)
    .service(MyService.prototype.constructor.name, MyService)
现在请注意类注释（builddev、buildprod）