javascript - 使用 AngularJS 和 Webpack 2 进行缩小

Question

我想连接包含我的 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 没有创建，因为它会产生很多错误。

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

Answer 1

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

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

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