使用 AngularJS 和 Webpack 2 缩小答案

【问题标题】：Minification with AngularJS and Webpack 2使用 AngularJS 和 Webpack 2 缩小
【发布时间】：2017-09-09 05:58:56
【问题描述】：

我想连接一个包含我的 angularjs 代码的 js 文件列表并将其 uglify。我想以有序的方式将其连接起来，以避免出现“that .... is not defined”错误。

我还从 github 下载了一些库并放在“lib”文件夹中。我想在 vendor.bundle.js 中连接这些库。

这是文件夹结构：

/app
    /feature1
        feature1.controller.js
    /feature2
        feature2.controller.js
    /...
    app.module.js
/libs
    /angular
        angular.min.js
    /angular-ui-router
        angular-ui-router.min.js
    /angular-material
        angular-material.min.js
        angular-material.min.css

    /...
app.js
vendor.js

在 app.js 里面我有这个：

require('./app/app.module.js');
require('./app/feature1/feature1.controller.js');
require('./app/feature2/feature2.controller.js');
...

在 vendor.js 里面我有这个：

require('./libs/angular/angular.min.js');
require('./libs/angular-ui-router/angular-ui-router.min.js');
require('./libs/angular-material/angular-material.min.js');
require('./libs/angular-material/angular-material.min.css');
...

这是 webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: "./app.js",
        vendor: "./vendor.js",
    },    
    output: {
        path: path.resolve(__dirname, "app"),
        filename: "app.bundle.js"
    },
    module: {
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename:"./app/vendor.bundle.js"
        }),
        new UglifyJSPlugin({
            compress: true,
            sourceMap: false,
            mangle: true
        })
    ]
};

这个配置的结果是app.bundle.js里面的拼接没有排序，所以有函数没有定义等等……

并且没有创建 vendor.bundle.js，因为它会产生很多错误。

使用拆分的个人代码和供应商代码进行缩小的正确方法是什么？

【问题讨论】：

有一个用于 webpack 的 angular 加载器可以做到这一点，但它需要每个 js 文件的模块才能工作

标签： javascript angularjs minify webpack-2 uglifyjs

【解决方案1】：

您是否尝试过使用命令wepack -p 在本机执行此操作？

如果还是不行可以尝试修改Uglify为：

new UglifyJSPlugin({
    compress: true,
    sourceMap: false,
    mangle: false // modified
})

【讨论】：

【解决方案2】：

@Fábio Miranda 的回答是正确的，但是如果你想为了性能而破坏文件，如果你使用 gulp，你可以使用this plugin 来实现这一点

干杯

【讨论】：

这不是问题的答案。如果您愿意，请添加评论。
也许你是对的。无论如何，它比你的更有帮助，你不觉得吗？
这实际上是正确的答案。 Webpack 的缩小过程，是改变函数内部的变量名称（模块、工厂、服务、指令和组件等）。由于 Angular 依赖于参数的命名，Webpack 正在破坏 angularjs。所以 ng-Anotate 实际上是解决这个问题的正确方法。可以在此处阅读有关此解决方案的更多信息：stackoverflow.com/questions/17238759/…

【解决方案3】：

我以树的方式解决了这个需要文件的问题。我使用 app.module.js 作为入口点，然后在 app.module.js 中我需要控制器的文件，然后再注入它们。这样，webpack 将按正确的顺序要求文件。

【讨论】：