使用 AngularJS 和 Webpack 2 进行缩小

Question

我想连接包含我的 angularjs 代码的 js 文件列表并对其进行丑化。我想按顺序连接它以避免 "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 没有创建，因为它会产生很多错误。

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

Answer 1

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

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

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

Answer 2

答案来自@Fábio Miranda is correct, but if you want to mangle you files anyway for performance, in case you are using gulp, you could achieve this using this plugin

干杯

Answer 3

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

使用 AngularJS 和 Webpack 2 进行缩小

Minification with AngularJS and Webpack 2

javascript

minify

uglifyjs

angularjs

webpack-2