Question

我们曾经在我们的应用程序中使用Webpack生成一个捆绑包（我们使用Angular 1.5~来构建UI），但是由于单个文件有点笨重而且只有特定区域需要很多东西。应用程序，我决定将我的应用程序分成多个包，即：

app.bundle.js
trade.bundle.js
analysis.bundle.js
... and so on

在开发环境中，它完美无缺，然而，当我尝试将其构建用于生产时，唯一的主要区别是我们使用UglifyJS插件来缩小捆绑包。

现在它不起作用，控制台显示错误“无法设置未定义的BrV”，然后由于Angular无法加载模块而导致大量其他错误无效。

BrV是我用于某些输入验证的第三方插件。

将分离的bundle缩小似乎打破了一些脚本，最终破坏了整个应用程序。

这是我的webpack conf（只有导出部分）

// configuration.js
module.exports = {
    WEBCONTENT_FOLDER: '../WebContent/',
    PATH_TO_OUTPUT: '../WebContent/js/',
    ENTRIES: {
        app: '../WebContent/js/app.js',
        trade: '../WebContent/js/src/trade.js',
        reports: '../WebContent/js/src/reports.js',
        analysis: '../WebContent/js/src/analysis.js',
        wordpress: '../WebContent/js/src/wordpress.js'
    }
};

// common.js
module.exports = {
  entry: config.ENTRIES,

  module: {
      rules: [
          {
              test: require.resolve(path.resolve(config.WEBCONTENT_FOLDER, 'js/forms')),
              use: 'exports-loader?addNavigation,ajaxCall,isChecked'
          }
      ]
  },

  resolve: {
    modules: [
        path.resolve(__dirname)
    ],

    alias: {
      ThirdParty: path.resolve(config.WEBCONTENT_FOLDER, 'js/third-party'),
      App: path.resolve(config.WEBCONTENT_FOLDER, 'js/myApp'),
      JS: path.resolve(config.WEBCONTENT_FOLDER, 'js'),
      JSP: path.resolve(config.WEBCONTENT_FOLDER, 'jsp')
    }
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.ProvidePlugin({
        addNavigation: [path.resolve(config.WEBCONTENT_FOLDER, 'js/forms'), 'addNavigation'],
        ajaxCall: [path.resolve(config.WEBCONTENT_FOLDER, 'js/forms'), 'ajaxCall']
    })
  ],

  output: {
    filename: '[name].bundle.js',
    path: path.resolve(config.PATH_TO_OUTPUT, 'dist')
  },

  externals: {
      'angular': 'angular',
      'jquery': 'jQuery'
  }
};

// prod.js
module.exports = merge(common, {
    devtool: 'source-map',
    module: {
          rules: [
              {
                  test: /\.js$/,
                  use: [
                      { loader: 'ifdef-loader', options: opts}
                  ]
              }
          ]
    },

    plugins: [
        new ngAnnotatePlugin({
            add: true,
        }),
        // I wasn't passing this object before, but I was trying to make it work, so I added this, mainly for the keep_fnames, which didn't do a thing though...
        new UglifyJSPlugin({
            parallel: 4,
            sourceMap: true,
            uglifyOptions: {
                ie8: false,
                mangle: {
                    keep_fnames: true
                }
            }
        }),
        new MergeIntoSingleFilePlugin({
            files: {
                'vendor.js': [
                    path.resolve(config.WEBCONTENT_FOLDER, 'js/third-party/dropzone/dropzone.js'),
                    path.resolve(config.WEBCONTENT_FOLDER, 'js/forms.js'),
                    path.resolve(config.WEBCONTENT_FOLDER, 'js//app/app.i18n.js'),
                ]
            },
            transform: {
                'vendor.js': code => require('uglify-js').minify(code).code
            }
        }),
        new webpack.DefinePlugin({
            'ENV': 'prod'
        })
    ]
});

有没有人知道可能发生的事情？如果需要，我可以提供更多信息。谢谢你的帮助。

亲切的问候。

编辑 - 解决方案

原来错误是由于BrV插件上的错误代码确实造成的。我认为这只是因为它是第一个被加载的库，即使我修复了这个，我也会遇到许多其他插件的问题，但最后，我修复了代码，一切正常。感谢。

uglification webpack bundle时出错

0 个答案: