Javascript 使用AngularJS和网页2缩小

我想连接一个包含angularjs代码的js文件列表，并将其丑化。我希望以有序的方式连接它，以避免“that….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');
...

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');
...

在vendor.js中，我有以下内容：

require('./app/app.module.js');
require('./app/feature1/feature1.controller.js');
require('./app/feature2/feature2.controller.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并没有被创建，因为它会产生很多错误

---

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

您是否尝试过使用命令

wepack-p

本机执行此操作

如果不起作用，您可以尝试将Uglify修改为：

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

---

您是否尝试过使用命令

wepack-p

以本机方式执行此操作

如果不起作用，您可以尝试将Uglify修改为：

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

来自的答案是正确的，但是如果您想为了提高性能而损坏文件，如果您使用的是gulp，您可以使用

干杯

来自的答案是正确的，但是如果您想为了性能而损坏文件，如果您使用的是gulp，您可以使用

---

干杯

我以树的方式解决了这个问题。我使用app.module.js作为入口点，然后在app.module.js中，我在注入控制器文件之前需要它们。

---

通过这种方式，webpack将以正确的顺序要求文件。

我以树的方式解决了这个要求文件的问题。我使用app.module.js作为入口点，然后在app.module.js中，我在注入控制器文件之前需要它们。

---

通过这种方式，webpack将要求文件按正确的顺序排列。

有一个用于webpack的角度加载器可以做到这一点，但它需要每个js文件的模块才能工作有一个用于webpack的角度加载器可以做到这一点，但它需要每个js文件的模块才能工作这不是问题的答案。如果你愿意的话，添加一条评论。也许你是对的。无论如何，它比你的更有用，你不觉得吗？这实际上是正确的答案。Webpack的缩小过程是更改函数（模块、工厂、服务、指令和组件等）中的变量名，由于Angular依赖于参数的命名，Webpack正在破坏angularjs。所以ng Anotate实际上是解决这个问题的正确方法。关于这个解决方案的更多信息可以在这里阅读：这不是问题的答案。如果你愿意的话，添加一条评论。也许你是对的。无论如何，它比你的更有用，你不觉得吗？这实际上是正确的答案。Webpack的缩小过程是更改函数（模块、工厂、服务、指令和组件等）中的变量名，由于Angular依赖于参数的命名，Webpack正在破坏angularjs。所以ng Anotate实际上是解决这个问题的正确方法。有关此解决方案的更多信息，请参见此处：